From ebd6b07b15a30d25c5538b716037ae019ae1fecc Mon Sep 17 00:00:00 2001 From: Richard Park Date: Wed, 6 Nov 2019 16:24:51 +0900 Subject: [PATCH] type of userSeq is changed from string to number --- .../src/lib/apis/file-profile-save.ts | 2 +- .../src/lib/apis/file-talk-download.ts | 39 ++++++++--- .../src/lib/apis/file-talk-share.ts | 2 +- .../src/lib/apis/trans-mass-talk-download.ts | 2 +- .../src/lib/apis/trans-mass-talk-save.ts | 2 +- .../src/lib/apis/translation-req.ts | 2 +- .../src/lib/apis/translation-save.ts | 2 +- .../src/lib/models/file-download-item.ts | 27 ++++++++ .../src/lib/services/common-api.service.ts | 37 ++++++++--- .../src/public-api.ts | 1 + .../src/lib/apis/company-list.ts | 4 +- .../src/lib/apis/token-update.ts | 4 +- .../dialogs/file-viewer.dialog.component.html | 9 ++- .../dialogs/file-viewer.dialog.component.ts | 28 +++++++- .../components/messages.component.ts | 15 +++-- .../components/message-box/file.component.ts | 2 +- .../src/lib/components/messages.component.ts | 9 +-- .../lib/components/file-viewer.component.html | 66 ++++++++++++++----- .../lib/components/file-viewer.component.scss | 11 +--- .../lib/components/file-viewer.component.ts | 39 +++++++++++ .../file-viewer/binary-viewer.component.html | 18 +++++ .../file-viewer/binary-viewer.component.scss | 13 ++++ .../binary-viewer.component.spec.ts | 27 ++++++++ .../file-viewer/binary-viewer.component.ts | 33 ++++++++++ .../document-viewer.component.scss | 11 +++- .../file-viewer/document-viewer.component.ts | 17 +++++ .../file-viewer/image-viewer.component.html | 63 ++++++++++++++---- .../file-viewer/image-viewer.component.scss | 21 ++++++ .../file-viewer/image-viewer.component.ts | 56 +++++++++++++++- .../file-viewer/sound-viewer.component.scss | 11 +++- .../file-viewer/sound-viewer.component.ts | 17 +++++ .../file-viewer/video-viewer.component.scss | 11 +++- .../file-viewer/video-viewer.component.ts | 17 +++++ .../src/lib/components/index.ts | 19 ------ .../src/lib/types/file-viewer.type.ts | 7 ++ .../src/lib/ucap-ui.module.ts | 22 ++++++- .../ucap-webmessenger-ui/src/public-api.ts | 9 +++ 37 files changed, 571 insertions(+), 104 deletions(-) create mode 100644 projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts delete mode 100644 projects/ucap-webmessenger-ui/src/lib/components/index.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts index adc9979b..22ef07f0 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts index bcc03955..3534793d 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts +++ b/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 = {}; - -export const encodeFileTalkDownload: APIEncoder = ( - req: FileTalkDownloadRequest -) => { - return ParameterUtil.encode(fileTalkDownloadEncodeMap, req); +const fileTalkDownloadEncodeMap = { + userSeq: 'p_user_seq', + deviceType: 'p_device_type', + token: 'p_token', + attachmentsSeq: 'p_att_seq' +}; + +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 + ); }; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts index e6335e7c..6213f701 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts index f22618a5..51d5a288 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts index b427d664..7c33d94a 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts index 082ec110..8ad80f3a 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts index 60007e88..36596042 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts +++ b/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; diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts new file mode 100644 index 00000000..e2d6a3f5 --- /dev/null +++ b/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; + + private downloadingProgress: Subject; + private downloadStartTime: number; + + constructor() {} + + downloadStart(): Subject { + this.downloadStartTime = new Date().getTime(); + this.downloadingProgress = new Subject(); + this.downloadingProgress$ = this.downloadingProgress + .asObservable() + .pipe(share()); + return this.downloadingProgress; + } + + downloadComplete() { + const endTime = new Date().getTime(); + this.downloadTime = endTime - this.downloadStartTime; + this.downloadingProgress.complete(); + } +} diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts index 600935df..7d3d0baf 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts +++ b/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 { - return this.httpClient.post( + const httpReq = new HttpRequest( + 'POST', !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.moduleConfig.urls.fileTalkDownload, - { responseType: 'blob' }, - { - params: encodeFileTalkDownload(req) - } + encodeFileTalkDownload(req), + { reportProgress: true, responseType: 'arraybuffer' } + ); + + let progress: Subject; + 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) => { + if (!!progress) { + req.fileDownloadItem.downloadComplete(); + } + return event.body; + }) ); } @@ -115,8 +138,6 @@ export class CommonApiService { req: FileTalkSaveRequest, fileTalkSaveUrl?: string ): Observable { - const asa = encodeFileTalkSave(req); - const httpReq = new HttpRequest( 'POST', !!fileTalkSaveUrl ? fileTalkSaveUrl : this.moduleConfig.urls.fileTalkSave, diff --git a/projects/ucap-webmessenger-api-common/src/public-api.ts b/projects/ucap-webmessenger-api-common/src/public-api.ts index 351d4812..0a47d28d 100644 --- a/projects/ucap-webmessenger-api-common/src/public-api.ts +++ b/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'; diff --git a/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts b/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts index 03f47356..e2db7796 100644 --- a/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts +++ b/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 = ( 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, diff --git a/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts b/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts index ecc38112..452dbb2e 100644 --- a/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts +++ b/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 = ( 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, diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html index f497ef54..8b644891 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html @@ -1 +1,8 @@ - + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts index 787ae77a..cac29042 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts +++ b/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(); + } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 64968c7a..f2afc39c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/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) { - this.logger.debug('imageViewer', value); + async onImageViewer(fileInfo: FileEventJson) { + 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 + } }); } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts index 9a7463ab..c5408204 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts +++ b/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) { diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index 7ebf3c6e..28c2ed48 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/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(); @Output() - imageViewer = new EventEmitter(); + imageViewer = new EventEmitter(); @Output() save = new EventEmitter<{ fileInfo: FileInfo; type: string }>(); @Output() @@ -157,8 +158,8 @@ export class MessagesComponent implements OnInit { } /** [Event] Image Viewer */ - onImageViewer(value: FileInfo) { - this.imageViewer.emit(value); + onImageViewer(fileInfo: FileEventJson) { + this.imageViewer.emit(fileInfo); } /** [Event] Attach File Save & Save As */ diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html index 54e4756b..0d22febe 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html @@ -1,18 +1,50 @@ -
-
- Third Line - - favorite - delete -
+
+ + + + +
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss index df1f5bbd..9e8bf81f 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss +++ b/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; - } - } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts index c4fa82ad..3862f5d7 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts +++ b/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(); + 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(); + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html new file mode 100644 index 00000000..25607b58 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html @@ -0,0 +1,18 @@ +
+ + Third Line + + favorite + delete + +
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss new file mode 100644 index 00000000..bd6ac4d2 --- /dev/null +++ b/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; + } + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts new file mode 100644 index 00000000..b5932b4b --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [BinaryViewerComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BinaryViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts new file mode 100644 index 00000000..81a0cfa3 --- /dev/null +++ b/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(); + + constructor() {} + ngOnInit() {} +} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss index 77d7ecbd..9c406efa 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss +++ b/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; + } + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts index d3bd1470..44926295 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts +++ b/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(); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html index 25607b58..981db2ee 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html @@ -1,18 +1,57 @@
- - Third Line + + image + {{ fileInfo.fileName }} - favorite - deletesettings_overscan + + + + + + +
+ + {{ fileDownloadItem.downloadingProgress$ | async }} +
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 77d7ecbd..936b5b31 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 @@ -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 { + } } 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 71a17a66..9c6a455e 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 @@ -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(); - constructor() {} - ngOnInit() {} + imageSrc: string; + + 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(); + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss index 77d7ecbd..acffcbee 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss +++ b/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; + } + } } 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 822a83d5..06e025c3 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 @@ -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(); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss index 77d7ecbd..d5420d73 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss +++ b/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; + } + } } 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 1d2e1223..e934f02c 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 @@ -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(); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/index.ts b/projects/ucap-webmessenger-ui/src/lib/components/index.ts deleted file mode 100644 index 990e9e01..00000000 --- a/projects/ucap-webmessenger-ui/src/lib/components/index.ts +++ /dev/null @@ -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 -]; diff --git a/projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts b/projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts new file mode 100644 index 00000000..dc1cede3 --- /dev/null +++ b/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' +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index d2aa0003..7eaa1e55 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/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, diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts index f2516526..50a0fdd2 100644 --- a/projects/ucap-webmessenger-ui/src/public-api.ts +++ b/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';