프로필 > 프로필이미지 원본보기 기능 추가.

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

@@ -1,6 +1,8 @@
 <ucap-file-viewer
   [fileInfo]="fileInfo"
   [fileDownloadUrl]="fileDownloadUrl"
+  [imageOnly]="imageOnly"
+  [imageOnlyData]="imageOnlyData"
   (download)="onDownload($event)"
   (closed)="onClosedViewer()"
 ></ucap-file-viewer>

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

@@ -7,6 +7,7 @@ import { DeviceType } from '@ucap-webmessenger/core';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { AppFileService } from '@app/services/file.service';
+import { ImageOnlyDataInfo } from '@ucap-webmessenger/ui';
 
 export interface FileViewerDialogData {
   fileInfo: FileEventJson;
@@ -14,6 +15,8 @@ export interface FileViewerDialogData {
   userSeq: number;
   deviceType: DeviceType;
   token: string;
+  imageOnly?: boolean;
+  imageOnlyData?: ImageOnlyDataInfo;
 }
 
 export interface FileViewerDialogResult {}
@@ -32,6 +35,9 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
 
   fileDownloadUrl: string;
 
+  imageOnly = false;
+  imageOnlyData: ImageOnlyDataInfo;
+
   constructor(
     public dialogRef: MatDialogRef<
       FileViewerDialogData,
@@ -47,19 +53,28 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
     this.userSeq = data.userSeq;
     this.deviceType = data.deviceType;
     this.token = data.token;
-
-    this.fileDownloadUrl = this.commonApiService.urlForFileTalkDownload(
-      {
-        userSeq: this.userSeq,
-        deviceType: this.deviceType,
-        token: this.token,
-        attachmentsSeq: this.fileInfo.attachmentSeq
-      },
-      this.downloadUrl
-    );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    if (!!this.data.imageOnly) {
+      this.imageOnly = this.data.imageOnly;
+      this.imageOnlyData = this.data.imageOnlyData;
+    }
+
+    if (!!this.imageOnly) {
+      this.fileDownloadUrl = this.imageOnlyData.imageUrl;
+    } else {
+      this.fileDownloadUrl = this.commonApiService.urlForFileTalkDownload(
+        {
+          userSeq: this.userSeq,
+          deviceType: this.deviceType,
+          token: this.token,
+          attachmentsSeq: this.fileInfo.attachmentSeq
+        },
+        this.downloadUrl
+      );
+    }
+  }
 
   ngOnDestroy(): void {}
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.html

@@ -9,6 +9,7 @@
   [openProfileOptions]="data.openProfileOptions"
   [useBuddyToggleButton]="useBuddyToggleButton"
   [authInfo]="authInfo"
+  (profileImageView)="onClickProfileImageView()"
   (openChat)="onClickChat($event)"
   (sendMessage)="onClickSendMessage($event)"
   (sendCall)="onClickSendClickToCall($event)"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts

@@ -24,7 +24,8 @@ import {
   SnackBarService,
   AlertDialogComponent,
   AlertDialogResult,
-  AlertDialogData
+  AlertDialogData,
+  ImageOnlyDataInfo
 } from '@ucap-webmessenger/ui';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@@ -56,6 +57,13 @@ import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { environment } from '../../../../../environments/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { UserInfoUpdateType } from '@ucap-webmessenger/protocol-info';
+import {
+  FileViewerDialogComponent,
+  FileViewerDialogData,
+  FileViewerDialogResult
+} from '@app/layouts/common/dialogs/file-viewer.dialog.component';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { FileType } from '@ucap-webmessenger/protocol-file';
 
 export interface ProfileDialogData {
   userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
@@ -451,6 +459,43 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
       );
   }
 
+  onClickProfileImageView() {
+    if (!this.loginRes || !this.loginRes.userInfo.profileImageFile) {
+      return;
+    }
+
+    const imageOnlyData: ImageOnlyDataInfo = {
+      imageUrl: this.userInfo.profileImageFile,
+      imageRootUrl: this.sessionVerinfo.profileRoot,
+      defaultImage: 'assets/images/img_nophoto_50.png',
+      fileName: this.userInfo.name
+    };
+
+    this.dialogService.open<
+      FileViewerDialogComponent,
+      FileViewerDialogData,
+      FileViewerDialogResult
+    >(FileViewerDialogComponent, {
+      position: {
+        top: '50px'
+      },
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      height: 'calc(100% - 50px)',
+      width: '100%',
+      panelClass: 'app-dialog-full',
+      data: {
+        imageOnly: true,
+        imageOnlyData,
+        fileInfo: {},
+        downloadUrl: this.sessionVerinfo.downloadUrl,
+        deviceType: this.environmentsInfo.deviceType,
+        token: this.loginRes.tokenString,
+        userSeq: this.loginRes.userSeq
+      }
+    });
+  }
+
   onUpdateIntro(intro: string) {
     this.store.dispatch(
       AuthenticationStore.infoUser({

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

@@ -1,7 +1,11 @@
 <mat-card class="example-card profile mat-elevation-z">
   <mat-card-header>
     <div class="profile-img">
-      <div class="profile-img-mask">
+      <div
+        class="profile-img-mask"
+        (click)="onClickProfileImageView()"
+        style="cursor: pointer;"
+      >
         <img
           ucapImage
           [base]="profileImageRoot"

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

@@ -45,6 +45,8 @@ export class ProfileComponent implements OnInit {
   @Input()
   authInfo: AuthResponse;
 
+  @Output()
+  profileImageView = new EventEmitter<void>();
   @Output()
   openChat = new EventEmitter<UserInfoSS>();
   @Output()
@@ -86,6 +88,10 @@ export class ProfileComponent implements OnInit {
 
   ngOnInit() {}
 
+  onClickProfileImageView() {
+    this.profileImageView.emit();
+  }
+
   onClickOpenChat() {
     this.openChat.emit(this.userInfo);
   }

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

@@ -13,6 +13,8 @@
     *ngSwitchCase="FileViewerType.Image"
     [fileInfo]="fileInfo"
     [fileDownloadUrl]="fileDownloadUrl"
+    [imageOnly]="imageOnly"
+    [imageOnlyData]="imageOnlyData"
     (download)="onDownload($event)"
     (closed)="onClosedViewer()"
   ></ucap-image-viewer>

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

@@ -4,6 +4,7 @@ import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { FileViewerType } from '../types/file-viewer.type';
 import { FileType } from '@ucap-webmessenger/protocol-file';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
+import { ImageOnlyDataInfo } from '../models/image-only-data-info';
 
 @Component({
   selector: 'ucap-file-viewer',
@@ -18,6 +19,11 @@ export class FileViewerComponent implements OnInit {
   @Input()
   fileDownloadUrl: string;
 
+  @Input()
+  imageOnly = false;
+  @Input()
+  imageOnlyData?: ImageOnlyDataInfo;
+
   @Output()
   download = new EventEmitter<FileDownloadItem>();
 
@@ -31,6 +37,10 @@ export class FileViewerComponent implements OnInit {
   ngOnInit() {}
 
   detectFileViewerType(fileInfo: FileEventJson): FileViewerType {
+    if (!!this.imageOnly) {
+      return FileViewerType.Image;
+    }
+
     switch (fileInfo.fileType) {
       case FileType.Image:
         return FileViewerType.Image;

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

@@ -17,10 +17,21 @@
       <circle cx="8.5" cy="8.5" r="1.5" />
       <path d="M20.4 14.5L16 10 4 20" />
     </svg>
-    <span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
+    <span class="ucap-image-viewer-title">
+      <ng-container
+        *ngIf="imageOnly; then imageOnlyName; else defaultName"
+      ></ng-container>
+      <ng-template #imageOnlyName>
+        {{ imageOnlyData.fileName }}
+      </ng-template>
+      <ng-template #defaultName>
+        {{ fileInfo.fileName }}
+      </ng-template>
+    </span>
     <span class="ucap-image-viewer-spacer"></span>
 
     <button
+      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomReset' | translate }}"
@@ -47,6 +58,7 @@
       </svg>
     </button>
     <button
+      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomOut' | translate }}"
@@ -72,6 +84,7 @@
       </svg>
     </button>
     <button
+      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.messages.zoomIn' | translate }}"
@@ -98,6 +111,7 @@
       </svg>
     </button>
     <button
+      *ngIf="!imageOnly"
       mat-icon-button
       class="ucap-image-viewer-action"
       matTooltip="{{ 'common.file.download' | translate }}"
@@ -166,14 +180,29 @@
       fxFlexFill
       fxLayoutAlign="center center"
     >
-      <img
+      <ng-container
-        #downloadImage
+        *ngIf="imageOnly; then imageOnlyImg; else defaultImg"
-        *ngIf="fileDownloadUrl"
+      ></ng-container>
-        [src]="fileDownloadUrl"
+      <ng-template #imageOnlyImg>
-        [style.width]="'auto'"
+        <img
-        [style.height]="imageHeight + 'px'"
+          ucapImage
-        (load)="onLoadFileDownloadUrl(downloadImage)"
+          [base]="imageOnlyData.imageRootUrl"
-      />
+          [path]="imageOnlyData.imageUrl"
+          [default]="imageOnlyData.defaultImage"
+          style="cursor: pointer; width: auto;"
+          (click)="onClickClose()"
+        />
+      </ng-template>
+      <ng-template #defaultImg>
+        <img
+          #downloadImage
+          *ngIf="fileDownloadUrl"
+          [src]="fileDownloadUrl"
+          [style.width]="'auto'"
+          [style.height]="imageHeight + 'px'"
+          (load)="onLoadFileDownloadUrl(downloadImage)"
+        />
+      </ng-template>
     </div>
   </div>
 </div>

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

@@ -13,6 +13,7 @@ import {
 import { ucapAnimations } from '../../animations';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
+import { ImageOnlyDataInfo } from '../../models/image-only-data-info';
 
 @Component({
   selector: 'ucap-image-viewer',
@@ -28,6 +29,11 @@ export class ImageViewerComponent implements OnInit {
   @Input()
   fileDownloadUrl: string;
 
+  @Input()
+  imageOnly = false;
+  @Input()
+  imageOnlyData?: ImageOnlyDataInfo;
+
   @Output()
   closed = new EventEmitter<void>();
 

projects/ucap-webmessenger-ui/src/lib/models/image-only-data-info.ts

@@ -0,0 +1,6 @@
+export interface ImageOnlyDataInfo {
+  imageUrl: string;
+  imageRootUrl: string;
+  defaultImage: string;
+  fileName: string;
+}

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

@@ -30,6 +30,8 @@ export * from './lib/directives/click-outside.directive';
 export * from './lib/directives/file-upload-for.directive';
 export * from './lib/directives/image.directive';
 
+export * from './lib/models/image-only-data-info';
+
 export * from './lib/services/bottom-sheet.service';
 export * from './lib/services/clipboard.service';
 export * from './lib/services/dialog.service';