refactoring of file download

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

@@ -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 { DeviceType } 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 { FileDownloadItem } from '@ucap-webmessenger/api';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
-import { TranslateService } from '@ngx-translate/core';
+import { AppFileService } from '@app/services/file.service';
-import { FileProtocolService } from '@ucap-webmessenger/protocol-file';
 
 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
+    this.appFileService.fileTalkDownlod({
-      .fileTalkDownload(
+      req: {
-        {
         userSeq: this.userSeq,
         deviceType: this.deviceType,
         token: this.token,
         attachmentsSeq: this.fileInfo.attachmentSeq,
         fileDownloadItem
       },
-        this.downloadUrl
+      fileName: this.fileInfo.fileName,
-      )
+      fileDownloadUrl: 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'
-                        )
-                      }
     });
   }
-                })
-                .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();

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

@@ -8,9 +8,7 @@ import {
   EventEmitter,
   Inject,
   ChangeDetectorRef,
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy
-  ElementRef,
-  NgZone
 } from '@angular/core';
 import {
   ucapAnimations,
@@ -24,20 +22,11 @@ import {
   AlertDialogData,
   AlertDialogResult,
   FileUploadQueueComponent,
-  StringUtil,
+  StringUtil
-  AlertSnackbarComponent,
-  AlertSnackbarData
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
-import {
+import { Observable, Subscription, forkJoin, of, BehaviorSubject } from 'rxjs';
-  Observable,
-  Subscription,
-  forkJoin,
-  combineLatest,
-  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
+    this.appFileService.fileTalkDownlod({
-      .fileTalkDownload({
+      req: {
         userSeq: this.loginResSubject.value.userSeq,
         deviceType: this.environmentsInfo.deviceType,
         token: this.loginResSubject.value.tokenString,
         attachmentsSeq: value.fileInfo.attachmentSeq,
         fileDownloadItem: value.fileDownloadItem
-      })
+      },
-      .pipe(
+      fileName: value.fileInfo.fileName,
-        take(1),
+      savePath
-        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);
     });
-                      });
-                    });
-                  } 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[]) {

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

@@ -9,15 +9,14 @@ import {
 import {
   FileInfo,
   FileDownloadInfo,
-  FileType,
+  FileType
-  FileProtocolService
 } 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 { tap } from 'rxjs/operators';
-import { FileUtil, MimeUtil } from '@ucap-webmessenger/core';
+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
+    this.appFileService.fileTalkDownlod({
-      .fileTalkDownload({
+      req: {
         userSeq: this.loginRes.userSeq,
         deviceType: this.environmentsInfo.deviceType,
         token: this.loginRes.tokenString,
         attachmentsSeq: fileInfo.info.seq,
         fileDownloadItem: fileInfo.fileDownloadItem
-      })
+      },
-      .pipe(
+      fileName: fileInfo.info.name
-        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'
-                        )
-                      }
     });
   }
-                })
-                .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 => {

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

@@ -3,16 +3,16 @@ import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
 import {
   FileInfo,
   FileDownloadInfo,
-  FileType,
+  FileType
-  FileProtocolService
 } 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,
+  DateOptions
-  AlertSnackbarComponent,
-  AlertSnackbarData
 } 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
+    this.appFileService.fileTalkDownlod({
-      .fileTalkDownload({
+      req: {
         userSeq: this.loginRes.userSeq,
         deviceType: this.environmentsInfo.deviceType,
         token: this.loginRes.tokenString,
         attachmentsSeq: fileInfo.info.seq,
         fileDownloadItem: fileInfo.fileDownloadItem
-      })
+      },
-      .pipe(
+      fileName: fileInfo.info.name
-        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'
-                        )
-                      }
     });
   }
-                })
-                .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 => {

projects/ucap-webmessenger-app/src/app/services/file.service.ts

@@ -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();
+  }
+}

projects/ucap-webmessenger-app/src/app/services/index.ts

@@ -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
 ];

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

@@ -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',

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

@@ -4,8 +4,8 @@ import {
   Input,
   Output,
   EventEmitter,
-  ElementRef,
+  ChangeDetectorRef,
-  ViewChild
+  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();
   }
 }