type of userSeq is changed from string to number

projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts

@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface FileProfileSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   file?: File;

projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts

@@ -1,17 +1,38 @@
 import { DeviceType } from '@ucap-webmessenger/core';
-import { APIRequest, APIEncoder, ParameterUtil } from '@ucap-webmessenger/api';
+import {
+  APIRequest,
+  APIEncoder,
+  ParameterUtil,
+  APIFormDataEncoder
+} from '@ucap-webmessenger/api';
+import { FileDownloadItem } from '../models/file-download-item';
 
 export interface FileTalkDownloadRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
-  attachmentsSeq?: string;
+  attachmentsSeq?: number;
+  fileDownloadItem?: FileDownloadItem;
 }
 
-const fileTalkDownloadEncodeMap = {};
+const fileTalkDownloadEncodeMap = {
-
+  userSeq: 'p_user_seq',
-export const encodeFileTalkDownload: APIEncoder<FileTalkDownloadRequest> = (
+  deviceType: 'p_device_type',
-  req: FileTalkDownloadRequest
+  token: 'p_token',
-) => {
+  attachmentsSeq: 'p_att_seq'
-  return ParameterUtil.encode(fileTalkDownloadEncodeMap, req);
+};
+
+export const encodeFileTalkDownload: APIFormDataEncoder<
+  FileTalkDownloadRequest
+> = (req: FileTalkDownloadRequest) => {
+  const extraParams: any = {};
+
+  extraParams.userSeq = String(req.userSeq);
+  extraParams.attachmentsSeq = String(req.attachmentsSeq);
+
+  return ParameterUtil.encodeFormData(
+    fileTalkDownloadEncodeMap,
+    req,
+    extraParams
+  );
 };

projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts

@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface FileTalkShareRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   attachmentsSeq?: string;

projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts

@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TransMassTalkDownloadRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   eventTransSeq?: string;

projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts

@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TransMassTalkSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   original?: string;

projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts

@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TranslationReqRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   original: string;

projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts

@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TranslationSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   roomSeq?: string;

projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts

@@ -0,0 +1,27 @@
+import { Observable, Subject } from 'rxjs';
+import { share } from 'rxjs/operators';
+
+export class FileDownloadItem {
+  downloadTime: number;
+  downloadingProgress$: Observable<number>;
+
+  private downloadingProgress: Subject<number>;
+  private downloadStartTime: number;
+
+  constructor() {}
+
+  downloadStart(): Subject<number> {
+    this.downloadStartTime = new Date().getTime();
+    this.downloadingProgress = new Subject<number>();
+    this.downloadingProgress$ = this.downloadingProgress
+      .asObservable()
+      .pipe(share());
+    return this.downloadingProgress;
+  }
+
+  downloadComplete() {
+    const endTime = new Date().getTime();
+    this.downloadTime = endTime - this.downloadStartTime;
+    this.downloadingProgress.complete();
+  }
+}

projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts

@@ -6,7 +6,7 @@ import {
   HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
 
 import { _MODULE_CONFIG } from '../types/token';
@@ -100,14 +100,37 @@ export class CommonApiService {
     req: FileTalkDownloadRequest,
     fileTalkDownloadUrl?: string
   ): Observable<Blob> {
-    return this.httpClient.post<Blob>(
+    const httpReq = new HttpRequest(
+      'POST',
       !!fileTalkDownloadUrl
         ? fileTalkDownloadUrl
         : this.moduleConfig.urls.fileTalkDownload,
-      { responseType: 'blob' },
+      encodeFileTalkDownload(req),
-      {
+      { reportProgress: true, responseType: 'arraybuffer' }
-        params: encodeFileTalkDownload(req)
+    );
-      }
+
+    let progress: Subject<number>;
+    if (!!req.fileDownloadItem) {
+      progress = req.fileDownloadItem.downloadStart();
+    }
+
+    return this.httpClient.request(httpReq).pipe(
+      filter(event => {
+        if (event instanceof HttpResponse) {
+          return true;
+        } else if (HttpEventType.DownloadProgress === event.type) {
+          if (!!progress) {
+            progress.next(Math.round((100 * event.loaded) / event.total));
+          }
+        }
+        return false;
+      }),
+      map((event: HttpResponse<any>) => {
+        if (!!progress) {
+          req.fileDownloadItem.downloadComplete();
+        }
+        return event.body;
+      })
     );
   }
 
@@ -115,8 +138,6 @@ export class CommonApiService {
     req: FileTalkSaveRequest,
     fileTalkSaveUrl?: string
   ): Observable<FileTalkSaveResponse> {
-    const asa = encodeFileTalkSave(req);
-
     const httpReq = new HttpRequest(
       'POST',
       !!fileTalkSaveUrl ? fileTalkSaveUrl : this.moduleConfig.urls.fileTalkSave,

projects/ucap-webmessenger-api-common/src/public-api.ts

@@ -15,6 +15,7 @@ export * from './lib/apis/trans-mass-talk-save';
 export * from './lib/apis/translation-req';
 export * from './lib/apis/translation-save';
 
+export * from './lib/models/file-download-item';
 export * from './lib/models/file-upload-item';
 
 export * from './lib/services/common-api.service';

projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts

@@ -8,7 +8,7 @@ import {
 import { Company } from '../models/company';
 
 export interface CompanyListRequest extends APIRequest {
-  userSeq?: string;
+  userSeq?: number;
   appType?: AppType;
   deviceType?: DeviceType;
   token?: string;
@@ -23,7 +23,7 @@ export const encodeCompanyList: APIEncoder<CompanyListRequest> = (
   req: CompanyListRequest
 ) => {
   return {
-    p_user_seq: req.userSeq,
+    p_user_seq: String(req.userSeq),
     p_app_type: req.appType,
     p_device_type: req.deviceType,
     p_token: req.token,

projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts

@@ -7,7 +7,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TokenUpdateRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   mobilePid?: string;
@@ -21,7 +21,7 @@ export const encodeTokenUpdate: APIEncoder<TokenUpdateRequest> = (
   req: TokenUpdateRequest
 ) => {
   return {
-    p_user_seq: req.userSeq,
+    p_user_seq: String(req.userSeq),
     p_device_type: req.deviceType,
     p_token: req.token,
     p_mobile_pid: req.mobilePid,

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

@@ -1 +1,8 @@
-<ucap-file-viewer></ucap-file-viewer>
+<ucap-file-viewer
+  [fileInfo]="fileInfo"
+  [downloadUrl]="downloadUrl"
+  [userSeq]="userSeq"
+  [deviceType]="deviceType"
+  [token]="token"
+  (closed)="onClosedViewer()"
+></ucap-file-viewer>

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

@@ -8,8 +8,16 @@ import {
 
 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';
 
-export interface FileViewerDialogData {}
+export interface FileViewerDialogData {
+  fileInfo: FileEventJson;
+  downloadUrl: string;
+  userSeq: number;
+  deviceType: DeviceType;
+  token: string;
+}
 
 export interface FileViewerDialogResult {}
 
@@ -19,6 +27,12 @@ export interface FileViewerDialogResult {}
   styleUrls: ['./file-viewer.dialog.component.scss']
 })
 export class FileViewerDialogComponent implements OnInit, OnDestroy {
+  fileInfo: FileEventJson;
+  downloadUrl: string;
+  userSeq: number;
+  deviceType: DeviceType;
+  token: string;
+
   constructor(
     public dialogRef: MatDialogRef<
       FileViewerDialogData,
@@ -26,9 +40,19 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
     >,
     @Inject(MAT_DIALOG_DATA) public data: FileViewerDialogData,
     private logger: NGXLogger
-  ) {}
+  ) {
+    this.fileInfo = data.fileInfo;
+    this.downloadUrl = data.downloadUrl;
+    this.userSeq = data.userSeq;
+    this.deviceType = data.deviceType;
+    this.token = data.token;
+  }
 
   ngOnInit() {}
 
   ngOnDestroy(): void {}
+
+  onClosedViewer(): void {
+    this.dialogRef.close();
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -29,7 +29,8 @@ import {
   isCopyable,
   isRecallable,
   InfoResponse,
-  EventJson
+  EventJson,
+  FileEventJson
 } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
@@ -348,8 +349,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     );
   }
 
-  async onImageViewer(value: FileInfo) {
+  async onImageViewer(fileInfo: FileEventJson) {
-    this.logger.debug('imageViewer', value);
+    this.logger.debug('imageViewer', fileInfo);
     const result = await this.dialogService.open<
       FileViewerDialogComponent,
       FileViewerDialogData,
@@ -364,7 +365,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       width: '100%',
       hasBackdrop: false,
       panelClass: 'app-dialog-full',
-      data: {}
+      data: {
+        fileInfo,
+        downloadUrl: this.sessionVerInfo.downloadUrl,
+        deviceType: this.environmentsInfo.deviceType,
+        token: this.loginRes.tokenString,
+        userSeq: this.loginRes.userSeq
+      }
     });
   }
 

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts

@@ -51,7 +51,7 @@ export class FileComponent implements OnInit {
   }
 
   onClickImageViewer(fileInfo: FileEventJson) {
-    this.imageViewer.emit(this.fileInfo);
+    this.imageViewer.emit(fileInfo);
   }
 
   onSave(value: string) {

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -12,7 +12,8 @@ import {
   Info,
   EventType,
   InfoResponse,
-  EventJson
+  EventJson,
+  FileEventJson
 } from '@ucap-webmessenger/protocol-event';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { UserInfo } from '@ucap-webmessenger/protocol-room';
@@ -45,7 +46,7 @@ export class MessagesComponent implements OnInit {
   @Output()
   massDetail = new EventEmitter<number>();
   @Output()
-  imageViewer = new EventEmitter<FileInfo>();
+  imageViewer = new EventEmitter<FileEventJson>();
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
   @Output()
@@ -157,8 +158,8 @@ export class MessagesComponent implements OnInit {
   }
 
   /** [Event] Image Viewer */
-  onImageViewer(value: FileInfo) {
+  onImageViewer(fileInfo: FileEventJson) {
-    this.imageViewer.emit(value);
+    this.imageViewer.emit(fileInfo);
   }
 
   /** [Event] Attach File Save & Save As */

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

@@ -1,18 +1,50 @@
-<div class="ucap-image-viewer-container">
+<div
-  <div class="ucap-image-viewer-header">
+  class="ucap-file-viewer-container"
-    <span>Third Line</span>
+  [ngSwitch]="detectFileViewerType(fileInfo)"
-    <span class="ucap-image-viewer-spacer"></span>
+>
-    <mat-icon
+  <ucap-document-viewer
-      class="example-icon"
+    *ngSwitchCase="FileViewerType.Document"
-      aria-hidden="false"
+    [fileInfo]="fileInfo"
-      aria-label="Example heart icon"
+    [downloadUrl]="downloadUrl"
-      >favorite</mat-icon
+    [userSeq]="userSeq"
-    >
+    [deviceType]="deviceType"
-    <mat-icon
+    [token]="token"
-      class="example-icon"
+    (closed)="onClosedViewer()"
-      aria-hidden="false"
+  ></ucap-document-viewer>
-      aria-label="Example delete icon"
+  <ucap-image-viewer
-      >delete</mat-icon
+    *ngSwitchCase="FileViewerType.Image"
-    >
+    [fileInfo]="fileInfo"
-  </div>
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-image-viewer>
+  <ucap-sound-viewer
+    *ngSwitchCase="FileViewerType.Sound"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-sound-viewer>
+  <ucap-video-viewer
+    *ngSwitchCase="FileViewerType.Video"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-video-viewer>
+  <ucap-binary-viewer
+    *ngSwitchDefault
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-binary-viewer>
 </div>

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

@@ -1,13 +1,4 @@
-.ucap-image-viewer-container {
+.ucap-file-viewer-container {
   width: 100%;
   height: 100%;
-
-  .ucap-image-viewer-header {
-    width: 100%;
-    height: 50px;
-
-    .ucap-image-viewer-spacer {
-      flex: 1 1 auto;
-    }
-  }
 }

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

@@ -1,5 +1,9 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../animations';
+import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { FileViewerType } from '../types/file-viewer.type';
+import { FileType } from '@ucap-webmessenger/protocol-file';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-file-viewer',
@@ -8,9 +12,44 @@ import { ucapAnimations } from '../animations';
   animations: ucapAnimations
 })
 export class FileViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
+  FileViewerType = FileViewerType;
+
   constructor() {}
+
   ngOnInit() {}
+
+  detectFileViewerType(fileInfo: FileEventJson): FileViewerType {
+    switch (fileInfo.fileType) {
+      case FileType.Image:
+        return FileViewerType.Image;
+      case FileType.Sound:
+        return FileViewerType.Sound;
+      case FileType.Video:
+        return FileViewerType.Video;
+      default:
+        return FileViewerType.Binary;
+    }
+  }
+
+  onClosedViewer(): void {
+    this.closed.emit();
+  }
 }

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

@@ -0,0 +1,18 @@
+<div class="ucap-image-viewer-container">
+  <mat-toolbar color="primary">
+    <span>Third Line</span>
+    <span class="ucap-image-viewer-spacer"></span>
+    <mat-icon
+      class="example-icon"
+      aria-hidden="false"
+      aria-label="Example heart icon"
+      >favorite</mat-icon
+    >
+    <mat-icon
+      class="example-icon"
+      aria-hidden="false"
+      aria-label="Example delete icon"
+      >delete</mat-icon
+    >
+  </mat-toolbar>
+</div>

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

@@ -0,0 +1,13 @@
+.ucap-binary-viewer-container {
+  width: 100%;
+  height: 100%;
+
+  .ucap-binary-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-binary-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { BinaryViewerComponent } from './binary-viewer.component';
+
+describe('BinaryViewerComponent', () => {
+  let component: BinaryViewerComponent;
+  let fixture: ComponentFixture<BinaryViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BinaryViewerComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BinaryViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
+
+@Component({
+  selector: 'ucap-binary-viewer',
+  templateUrl: './binary-viewer.component.html',
+  styleUrls: ['./binary-viewer.component.scss'],
+  animations: ucapAnimations
+})
+export class BinaryViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
+  @Output()
+  closed = new EventEmitter<void>();
+
+  constructor() {}
+  ngOnInit() {}
+}

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

@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-document-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-document-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-document-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }

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

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-document-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class DocumentViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 

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

@@ -1,18 +1,57 @@
 <div class="ucap-image-viewer-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar color="primary" class="ucap-image-viewer-header">
-    <span>Third Line</span>
+    <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>
-    <mat-icon
+
-      class="example-icon"
+    <button
-      aria-hidden="false"
+      mat-icon-button
-      aria-label="Example heart icon"
+      class="ucap-image-viewer-action"
-      >favorite</mat-icon
+      matTooltip="이미지 크기 재설정"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
     >
-    <mat-icon
+      <mat-icon>settings_overscan</mat-icon>
-      class="example-icon"
+    </button>
-      aria-hidden="false"
+    <button
-      aria-label="Example delete icon"
+      mat-icon-button
-      >delete</mat-icon
+      class="ucap-image-viewer-action"
+      matTooltip="축소"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
     >
+      <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="확대"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
+    >
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="다운로드"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
+    >
+      <mat-icon>get_app</mat-icon>
+    </button>
+
+    <button
+      mat-raised-button
+      color="primary"
+      class="ucap-image-viewer-action"
+      (click)="onClickClose()"
+    >
+      Close
+    </button>
   </mat-toolbar>
+  <div class="ucap-image-viewer-body">
+    <img />
+    {{ fileDownloadItem.downloadingProgress$ | async }}
+  </div>
 </div>

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

@@ -1,4 +1,25 @@
 .ucap-image-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-image-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-image-viewer-icon {
+    }
+
+    .ucap-image-viewer-title {
+    }
+
+    .ucap-image-viewer-spacer {
+      flex: 1 1 auto;
+    }
+
+    .ucap-image-viewer-action {
+    }
+  }
+
+  .ucap-image-viewer-body {
+  }
 }

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

@@ -1,5 +1,12 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
+import {
+  CommonApiService,
+  FileDownloadItem
+} from '@ucap-webmessenger/api-common';
+import { take, map } from 'rxjs/operators';
 
 @Component({
   selector: 'ucap-image-viewer',
@@ -8,9 +15,54 @@ import { ucapAnimations } from '../../animations';
   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<void>();
 
-  constructor() {}
+  imageSrc: string;
-  ngOnInit() {}
+
+  fileDownloadItem: FileDownloadItem;
+
+  constructor(private commonApiService: CommonApiService) {}
+
+  ngOnInit() {
+    this.fileDownloadItem = new FileDownloadItem();
+
+    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(aaa => {
+          console.log('fileTalkDownload', aaa);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }

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

@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-sound-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-sound-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-sound-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }

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

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-sound-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class SoundViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 

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

@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-video-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-video-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-video-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }

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

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-video-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class VideoViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 

projects/ucap-webmessenger-ui/src/lib/components/index.ts

@@ -1,19 +0,0 @@
-import { FileUploadQueueComponent } from './file-upload-queue.component';
-import { FloatActionButtonComponent } from './float-action-button.component';
-import { FileViewerComponent } from './file-viewer.component';
-
-import { DocumentViewerComponent } from './file-viewer/document-viewer.component';
-import { ImageViewerComponent } from './file-viewer/image-viewer.component';
-import { SoundViewerComponent } from './file-viewer/sound-viewer.component';
-import { VideoViewerComponent } from './file-viewer/video-viewer.component';
-
-export const UI_COMMON_COMPONENTS = [
-  FileUploadQueueComponent,
-  FloatActionButtonComponent,
-  FileViewerComponent,
-
-  DocumentViewerComponent,
-  ImageViewerComponent,
-  SoundViewerComponent,
-  VideoViewerComponent
-];

projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts

@@ -0,0 +1,7 @@
+export enum FileViewerType {
+  Document = 'Document',
+  Image = 'Image',
+  Sound = 'Sound',
+  Video = 'Video',
+  Binary = 'Binary'
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -14,7 +14,15 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
-import { UI_COMMON_COMPONENTS } from './components/index';
+import { FileUploadQueueComponent } from './components/file-upload-queue.component';
+import { FloatActionButtonComponent } from './components/float-action-button.component';
+import { FileViewerComponent } from './components/file-viewer.component';
+
+import { BinaryViewerComponent } from './components/file-viewer/binary-viewer.component';
+import { DocumentViewerComponent } from './components/file-viewer/document-viewer.component';
+import { ImageViewerComponent } from './components/file-viewer/image-viewer.component';
+import { SoundViewerComponent } from './components/file-viewer/sound-viewer.component';
+import { VideoViewerComponent } from './components/file-viewer/video-viewer.component';
 
 import { BottomSheetService } from './services/bottom-sheet.service';
 import { ClipboardService } from './services/clipboard.service';
@@ -32,7 +40,17 @@ import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
 import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
 
-const COMPONENTS = [...UI_COMMON_COMPONENTS];
+const COMPONENTS = [
+  FileUploadQueueComponent,
+  FloatActionButtonComponent,
+  FileViewerComponent,
+
+  BinaryViewerComponent,
+  DocumentViewerComponent,
+  ImageViewerComponent,
+  SoundViewerComponent,
+  VideoViewerComponent
+];
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 const DIRECTIVES = [
   ClickOutsideDirective,

projects/ucap-webmessenger-ui/src/public-api.ts

@@ -4,7 +4,14 @@
 
 export * from './lib/animations';
 
+export * from './lib/components/file-viewer/document-viewer.component';
+export * from './lib/components/file-viewer/image-viewer.component';
+export * from './lib/components/file-viewer/sound-viewer.component';
+export * from './lib/components/file-viewer/video-viewer.component';
+
 export * from './lib/components/file-upload-queue.component';
+export * from './lib/components/file-viewer.component';
+export * from './lib/components/float-action-button.component';
 
 export * from './lib/dialogs/alert.dialog.component';
 export * from './lib/dialogs/confirm.dialog.component';
@@ -18,6 +25,8 @@ export * from './lib/services/clipboard.service';
 export * from './lib/services/dialog.service';
 export * from './lib/services/snack-bar.service';
 
+export * from './lib/types/file-viewer.type';
+
 export * from './lib/utils/string.util';
 
 export * from './lib/ucap-ui.module';