ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring of file download

Browse Source
This commit is contained in:
richard-loafle 2020-02-06 13:05:24 +09:00
parent 739925911d
commit d8ff959bd6
8 changed files with 202 additions and 407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,18 +3,10 @@ import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { NGXLogger } from 'ngx-logger';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { DeviceType, FileUtil, MimeUtil } from '@ucap-webmessenger/core';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { take, map, finalize, tap } from 'rxjs/operators';
import {
SnackBarService,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { DeviceType } from '@ucap-webmessenger/core';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { TranslateService } from '@ngx-translate/core';
import { FileProtocolService } from '@ucap-webmessenger/protocol-file';
import { AppFileService } from '@app/services/file.service';
export interface FileViewerDialogData {
fileInfo: FileEventJson;
@ -46,11 +38,8 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
FileViewerDialogResult
>,
@Inject(MAT_DIALOG_DATA) public data: FileViewerDialogData,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private translateService: TranslateService,
private snackBarService: SnackBarService,
private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService,
private appFileService: AppFileService,
private logger: NGXLogger
) {
this.fileInfo = data.fileInfo;
@ -75,94 +64,18 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {}
onDownload(fileDownloadItem: FileDownloadItem): void {
this.commonApiService
.fileTalkDownload(
{
this.appFileService.fileTalkDownlod({
req: {
userSeq: this.userSeq,
deviceType: this.deviceType,
token: this.token,
attachmentsSeq: this.fileInfo.attachmentSeq,
fileDownloadItem
},
this.downloadUrl
)
.pipe(
take(1),
map(async rawBlob => {
const mimeType = MimeUtil.getMimeFromExtension(this.fileInfo.fileExt);
const blob = rawBlob.slice(0, rawBlob.size, mimeType);
FileUtil.fromBlobToBuffer(blob)
.then(buffer => {
/** download check */
this.fileProtocolService
.downCheck({
seq: this.fileInfo.attachmentSeq
})
.pipe(take(1))
.subscribe();
this.nativeService
.saveFile(buffer, this.fileInfo.fileName, mimeType)
.then(result => {
if (!!result) {
this.snackBarService.open(
this.translateService.instant(
'common.file.results.savedToPath',
{
path: result
}
),
'',
{
duration: 3000,
verticalPosition: 'bottom'
}
);
} else {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
fileName: this.fileInfo.fileName,
fileDownloadUrl: this.downloadUrl
});
}
})
.catch(reason => {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {
this.logger.error('download', reason);
});
}),
finalize(() => {
setTimeout(() => {
fileDownloadItem.downloadingProgress$ = undefined;
}, 1000);
})
)
.subscribe();
}
onClosedViewer(): void {
this.dialogRef.close();

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

@ -8,9 +8,7 @@ import {
EventEmitter,
Inject,
ChangeDetectorRef,
ChangeDetectionStrategy,
ElementRef,
NgZone
ChangeDetectionStrategy
} from '@angular/core';
import {
ucapAnimations,
@ -24,20 +22,11 @@ import {
AlertDialogData,
AlertDialogResult,
FileUploadQueueComponent,
StringUtil,
AlertSnackbarComponent,
AlertSnackbarData
StringUtil
} from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
import {
Observable,
Subscription,
forkJoin,
combineLatest,
of,
BehaviorSubject
} from 'rxjs';
import { Observable, Subscription, forkJoin, of, BehaviorSubject } from 'rxjs';
import {
Info,
@ -78,7 +67,7 @@ import {
RoomType,
UserInfoShort
} from '@ucap-webmessenger/protocol-room';
import { tap, take, map, catchError, finalize } from 'rxjs/operators';
import { take, map, catchError } from 'rxjs/operators';
import {
FormComponent as UCapUiChatFormComponent,
MessagesComponent as UCapUiChatMessagesComponent
@ -108,7 +97,7 @@ import {
FileViewerDialogData,
FileViewerDialogResult
} from '@app/layouts/common/dialogs/file-viewer.dialog.component';
import { FileUtil, StickerFilesInfo, MimeUtil } from '@ucap-webmessenger/core';
import { FileUtil, StickerFilesInfo } from '@ucap-webmessenger/core';
import { StatusCode } from '@ucap-webmessenger/api';
import {
@ -131,12 +120,13 @@ import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { TranslateService } from '@ngx-translate/core';
import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
import { TranslateService as UiTranslateService } from '@ucap-webmessenger/ui';
import { FileProtocolService } from '@ucap-webmessenger/protocol-file';
import {
ClipboardDialogComponent,
ClipboardDialogData,
ClipboardDialogResult
} from '../dialogs/chat/clipboard.dialog.component';
import { AppFileService } from '@app/services/file.service';
@Component({
selector: 'app-layout-messenger-messages',
@ -241,7 +231,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
private sessionStorageService: SessionStorageService,
private localStorageService: LocalStorageService,
private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService,
private clipboardService: ClipboardService,
private uiTranslateService: UiTranslateService,
private translateService: TranslateService,
@ -249,7 +238,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
private dialogService: DialogService,
private snackBarService: SnackBarService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private ngZone: NgZone,
private appFileService: AppFileService,
private logger: NGXLogger
) {
this.sessionVerInfo = this.sessionStorageService.get<VersionInfo2Response>(
@ -1052,103 +1041,17 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
},
savePath?: string
) {
this.commonApiService
.fileTalkDownload({
this.appFileService.fileTalkDownlod({
req: {
userSeq: this.loginResSubject.value.userSeq,
deviceType: this.environmentsInfo.deviceType,
token: this.loginResSubject.value.tokenString,
attachmentsSeq: value.fileInfo.attachmentSeq,
fileDownloadItem: value.fileDownloadItem
})
.pipe(
take(1),
map(async rawBlob => {
const mimeType = MimeUtil.getMimeFromExtension(
FileUtil.getExtension(value.fileInfo.fileName)
);
const blob = rawBlob.slice(0, rawBlob.size, mimeType);
FileUtil.fromBlobToBuffer(blob)
.then(buffer => {
/** download check */
this.fileProtocolService
.downCheck({
seq: value.fileInfo.attachmentSeq
})
.pipe(take(1))
.subscribe();
this.nativeService
.saveFile(buffer, value.fileInfo.fileName, mimeType, savePath)
.then(result => {
if (!!result) {
const snackBarRef = this.snackBarService.open(
this.translateService.instant(
'common.file.results.savedToPath',
{
path: result
}
),
this.translateService.instant('common.file.open'),
{
duration: 3000,
verticalPosition: 'bottom',
horizontalPosition: 'center'
}
);
snackBarRef.onAction().subscribe(() => {
this.ngZone.runOutsideAngular(() => {
this.nativeService
.openTargetItem(result)
.catch(reason => {
this.logger.warn(reason);
},
fileName: value.fileInfo.fileName,
savePath
});
});
});
} else {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
}
})
.catch(reason => {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {
this.logger.error('download', reason);
});
}),
finalize(() => {
setTimeout(() => {
value.fileDownloadItem.downloadingProgress$ = undefined;
}, 1000);
})
)
.subscribe();
}
async onFileSelected(fileUploadItems: FileUploadItem[]) {

102
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
View File

@ -9,15 +9,14 @@ import {
import {
FileInfo,
FileDownloadInfo,
FileType,
FileProtocolService
FileType
} from '@ucap-webmessenger/protocol-file';
import { Subscription, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import { tap, map, take, finalize } from 'rxjs/operators';
import { FileUtil, MimeUtil } from '@ucap-webmessenger/core';
import { tap } from 'rxjs/operators';
import { FileUtil } from '@ucap-webmessenger/core';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
@ -30,15 +29,10 @@ import {
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
import { NGXLogger } from 'ngx-logger';
import {
SnackBarService,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { ModuleConfig } from '@ucap-webmessenger/api-common';
import { _MODULE_CONFIG } from 'projects/ucap-webmessenger-api-common/src/lib/config/token';
import { TranslateService } from '@ngx-translate/core';
import { AppFileService } from '@app/services/file.service';
export interface FileInfoTotal {
info: FileInfo;
@ -78,10 +72,8 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
private store: Store<any>,
private sessionStorageService: SessionStorageService,
private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService,
private translateService: TranslateService,
private snackBarService: SnackBarService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private appFileService: AppFileService,
@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
private logger: NGXLogger
) {
@ -229,93 +221,17 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
}
onClickDownload(fileInfo: FileInfoTotal) {
this.commonApiService
.fileTalkDownload({
this.appFileService.fileTalkDownlod({
req: {
userSeq: this.loginRes.userSeq,
deviceType: this.environmentsInfo.deviceType,
token: this.loginRes.tokenString,
attachmentsSeq: fileInfo.info.seq,
fileDownloadItem: fileInfo.fileDownloadItem
})
.pipe(
take(1),
map(async rawBlob => {
const mimeType = MimeUtil.getMimeFromExtension(
FileUtil.getExtension(fileInfo.info.name)
);
const blob = rawBlob.slice(0, rawBlob.size, mimeType);
FileUtil.fromBlobToBuffer(blob)
.then(buffer => {
/** download check */
this.fileProtocolService
.downCheck({
seq: fileInfo.info.seq
})
.pipe(take(1))
.subscribe();
this.nativeService
.saveFile(buffer, fileInfo.info.name, mimeType)
.then(result => {
if (!!result) {
this.snackBarService.open(
this.translateService.instant(
'common.file.results.savedToPath',
{
path: result
}
),
'',
{
duration: 3000,
verticalPosition: 'bottom'
}
);
} else {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
},
fileName: fileInfo.info.name
});
}
})
.catch(reason => {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {
this.logger.error('download', reason);
});
}),
finalize(() => {
setTimeout(() => {
fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
}, 1000);
})
)
.subscribe();
}
onClickDownloadAll(): void {
this.selectedFileList.forEach(fileInfo => {

103
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
View File

@ -3,16 +3,16 @@ import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import {
FileInfo,
FileDownloadInfo,
FileType,
FileProtocolService
FileType
} from '@ucap-webmessenger/protocol-file';
import { Subscription, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import * as EventStore from '@app/store/messenger/event';
import { tap, map, take, finalize } from 'rxjs/operators';
import { FileUtil, MimeUtil } from '@ucap-webmessenger/core';
import { tap } from 'rxjs/operators';
import { FileUtil } from '@ucap-webmessenger/core';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
@ -20,16 +20,12 @@ import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { NGXLogger } from 'ngx-logger';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import {
SnackBarService,
DialogService,
ConfirmDialogComponent,
ConfirmDialogResult,
ConfirmDialogData,
DateOptions,
AlertSnackbarComponent,
AlertSnackbarData
DateOptions
} from '@ucap-webmessenger/ui';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { EventType } from '@ucap-webmessenger/protocol-event';
import {
CreateChatDialogComponent,
@ -43,6 +39,7 @@ import {
} from '@app/types';
import { RoomInfo } from '@ucap-webmessenger/protocol-room';
import { TranslateService } from '@ngx-translate/core';
import { AppFileService } from '@app/services/file.service';
export interface FileInfoTotal {
info: FileInfo;
@ -78,11 +75,9 @@ export class FileBoxComponent implements OnInit, OnDestroy {
constructor(
private store: Store<any>,
private sessionStorageService: SessionStorageService,
private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService,
private translateService: TranslateService,
private snackBarService: SnackBarService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private appFileService: AppFileService,
private dialogService: DialogService,
private logger: NGXLogger
) {
@ -259,93 +254,17 @@ export class FileBoxComponent implements OnInit, OnDestroy {
}
onClickDownload(fileInfo: FileInfoTotal) {
this.commonApiService
.fileTalkDownload({
this.appFileService.fileTalkDownlod({
req: {
userSeq: this.loginRes.userSeq,
deviceType: this.environmentsInfo.deviceType,
token: this.loginRes.tokenString,
attachmentsSeq: fileInfo.info.seq,
fileDownloadItem: fileInfo.fileDownloadItem
})
.pipe(
take(1),
map(async rawBlob => {
const mimeType = MimeUtil.getMimeFromExtension(
FileUtil.getExtension(fileInfo.info.name)
);
const blob = rawBlob.slice(0, rawBlob.size, mimeType);
FileUtil.fromBlobToBuffer(blob)
.then(buffer => {
/** download check */
this.fileProtocolService
.downCheck({
seq: fileInfo.info.seq
})
.pipe(take(1))
.subscribe();
this.nativeService
.saveFile(buffer, fileInfo.info.name, mimeType)
.then(result => {
if (!!result) {
this.snackBarService.open(
this.translateService.instant(
'common.file.results.savedToPath',
{
path: result
}
),
'',
{
duration: 3000,
verticalPosition: 'bottom'
}
);
} else {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
},
fileName: fileInfo.info.name
});
}
})
.catch(reason => {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {
this.logger.error('download', reason);
});
}),
finalize(() => {
setTimeout(() => {
fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
}, 1000);
})
)
.subscribe();
}
onClickDownloadAll(): void {
this.selectedFileList.forEach(fileInfo => {

128
projects/ucap-webmessenger-app/src/app/services/file.service.ts Normal file
View File

@ -0,0 +1,128 @@
import { Injectable, Inject, NgZone } from '@angular/core';
import {
FileTalkDownloadRequest,
CommonApiService
} from '@ucap-webmessenger/api-common';
import { map, take, finalize, catchError } from 'rxjs/operators';
import { MimeUtil, FileUtil } from '@ucap-webmessenger/core';
import { FileProtocolService } from '@ucap-webmessenger/protocol-file';
import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
import {
SnackBarService,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { TranslateService } from '@ngx-translate/core';
import { NGXLogger } from 'ngx-logger';
import { of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AppFileService {
constructor(
private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private snackBarService: SnackBarService,
private translateService: TranslateService,
private ngZone: NgZone,
private logger: NGXLogger
) {}
fileTalkDownlod(param: {
req: FileTalkDownloadRequest;
fileName: string;
fileDownloadUrl?: string;
savePath?: string;
}) {
const req = param.req;
const fileName = param.fileName;
const fileDownloadItem = req.fileDownloadItem;
const fileDownloadUrl = param.fileDownloadUrl;
const savePath = param.savePath;
const fileTalkDownloadError = (reason: any) => {
this.logger.warn(reason);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant('common.file.errors.failToSave'),
buttonText: this.translateService.instant('common.file.errors.label')
}
});
};
this.commonApiService
.fileTalkDownload(req, fileDownloadUrl)
.pipe(
take(1),
map(rawBlob => {
const mimeType = MimeUtil.getMimeFromExtension(
FileUtil.getExtension(fileName)
);
const blob = rawBlob.slice(0, rawBlob.size, mimeType);
FileUtil.fromBlobToBuffer(blob)
.then(buffer => {
/** download check */
this.fileProtocolService
.downCheck({
seq: req.attachmentsSeq
})
.pipe(take(1))
.subscribe();
this.nativeService
.saveFile(buffer, fileName, mimeType, savePath)
.then(filePath => {
if (!!filePath) {
const snackBarRef = this.snackBarService.open(
this.translateService.instant(
'common.file.results.savedToPath',
{
path: filePath
}
),
this.translateService.instant('common.file.open'),
{
duration: 3000,
verticalPosition: 'bottom',
horizontalPosition: 'center'
}
);
snackBarRef.onAction().subscribe(() => {
this.ngZone.runOutsideAngular(() => {
this.nativeService
.openTargetItem(filePath)
.catch(reason => {
this.logger.warn(reason);
});
});
});
} else {
fileTalkDownloadError('fail');
}
})
.catch(reason => {
fileTalkDownloadError(reason);
});
})
.catch(reason => {
fileTalkDownloadError(reason);
});
}),
finalize(() => {
if (!!fileDownloadItem) {
setTimeout(() => {
fileDownloadItem.downloadingProgress$ = undefined;
}, 1000);
}
}),
catchError(error => of(error))
)
.subscribe();
}
}

4
projects/ucap-webmessenger-app/src/app/services/index.ts
View File

@ -3,11 +3,13 @@ import { AppAuthenticationService } from './authentication.service';
import { AppLoaderService } from './loader.service';
import { AppNotificationService } from './notification.service';
import { AppNativeService } from './native.service';
import { AppFileService } from './file.service';
export const SERVICES = [
AppService,
AppAuthenticationService,
AppLoaderService,
AppNotificationService,
AppNativeService
AppNativeService,
AppFileService
];

10
projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts
View File

@ -1,10 +1,16 @@
import { createAction, props } from '@ngrx/store';
import { Info, EventJson } from '@ucap-webmessenger/protocol-event';
import {
Info,
EventJson,
FileEventJson
} from '@ucap-webmessenger/protocol-event';
import {
MassTalkDownloadRequest,
MassTalkDownloadResponse
MassTalkDownloadResponse,
FileTalkDownloadRequest
} from '@ucap-webmessenger/api-common';
import { RightDrawer } from '@app/types';
import { FileDownloadItem } from '@ucap-webmessenger/api';
export const selectedRoom = createAction(
'[Messenger::Chat] selectedRoom',

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

@ -4,8 +4,8 @@ import {
Input,
Output,
EventEmitter,
ElementRef,
ViewChild
ChangeDetectorRef,
ChangeDetectionStrategy
} from '@angular/core';
import { ucapAnimations } from '../../animations';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
@ -15,7 +15,8 @@ import { FileDownloadItem } from '@ucap-webmessenger/api';
selector: 'ucap-image-viewer',
templateUrl: './image-viewer.component.html',
styleUrls: ['./image-viewer.component.scss'],
animations: ucapAnimations
animations: ucapAnimations,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageViewerComponent implements OnInit {
@Input()
@ -37,7 +38,7 @@ export class ImageViewerComponent implements OnInit {
zoomRatio = 100;
constructor() {}
constructor(private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
this.naturalWidth = this.fileInfo.imageWidth;
@ -54,9 +55,10 @@ export class ImageViewerComponent implements OnInit {
}
onLoadFileDownloadUrl(img: HTMLImageElement) {
console.log('onLoadFileDownloadUrl', img.naturalWidth, img.naturalHeight);
this.naturalWidth = img.naturalWidth;
this.naturalHeight = img.naturalHeight;
this.changeDetectorRef.detectChanges();
}
onClickZoomOut() {
@ -64,14 +66,20 @@ export class ImageViewerComponent implements OnInit {
return;
}
this.zoomRatio -= 10;
this.changeDetectorRef.detectChanges();
}
onClickZoomIn() {
if (180 <= this.zoomRatio) {
return;
}
this.zoomRatio += 10;
this.changeDetectorRef.detectChanges();
}
onClickZoomReset() {
this.zoomRatio = 100;
this.changeDetectorRef.detectChanges();
}
}