음성파일 처리 및 expired 처리.

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

@@ -73,6 +73,7 @@
     <perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
       <ucap-chat-messages
         [messages]="eventList$ | async"
+        [eventInfoStatus]="eventInfoStatus$ | async"
         [userInfos]="userInfoList"
         [loginRes]="loginRes"
         [sessionVerInfo]="sessionVerInfo"

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

@@ -23,7 +23,8 @@ import {
   EventType,
   isRecalled,
   isCopyable,
-  isRecallable
+  isRecallable,
+  InfoResponse
 } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
@@ -84,6 +85,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   userInfoList: UserInfo[];
   userInfoListSubscription: Subscription;
   eventListProcessing$: Observable<boolean>;
+  eventInfoStatus$: Observable<InfoResponse>;
   sessionVerInfo: VersionInfo2Response;
 
   isRecalledMessage = isRecalled;
@@ -147,6 +149,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
     );
 
+    this.eventInfoStatus$ = this.store.pipe(
+      select(AppStore.MessengerSelector.EventSelector.infoStatus)
+    );
+
     this.psChatContent.directiveRef.scrollToBottom(0, 0);
   }
 

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

@@ -1,20 +1,23 @@
 <div class="bubble-main">
   <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
-  <div class="file-img ppt"></div>
+  <div class="file-img" [ngClass]="fileInfo.FileExt"></div>
   <ul class="file-info">
     <li class="file-name">
       {{ fileInfo.FileName }}
     </li>
     <li class="file-size">
-      {{ fileInfo.AttSize }}
+      {{ fileInfo.AttSize | ucapBytes }}
     </li>
     <li class="file-ext">
       {{ fileInfo.FileExt }}
     </li>
   </ul>
 </div>
-<div *ngIf="fileInfo && fileInfo.AttSEQ" class="btn-box">
+<div class="btn-box">
-  <ul>
+  <ul *ngIf="expired">
+    <li>기간이 만료된 파일입니다.</li>
+  </ul>
+  <ul *ngIf="!expired && fileInfo && fileInfo.AttSEQ">
     <li>
       <button mat-button (click)="onClickSave()">Save</button>
     </li>

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

@@ -33,13 +33,15 @@
         background-image: url(/assets/images/file/icon_talk_hwp_d.png);
       }
     }
-    &.ppt {
+    &.ppt,
+    &.pptx {
       background-image: url(/assets/images/file/icon_talk_ppt.png);
       &.disable {
         background-image: url(/assets/images/file/icon_talk_ppt_d.png);
       }
     }
-    &.xls {
+    &.xls,
+    &.xlsx {
       background-image: url(/assets/images/file/icon_talk_xls.png);
       &.disable {
         background-image: url(/assets/images/file/icon_talk_xls_d.png);

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

@@ -10,6 +10,9 @@ import { NGXLogger } from 'ngx-logger';
 export class AttachFileComponent implements OnInit {
   @Input()
   fileInfo: FileInfo;
+  @Input()
+  expired = false;
+
   @Output()
   save = new EventEmitter<string>();
 

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

@@ -1,9 +1,35 @@
-<ng-container *ngIf="fileInfo && fileInfo.FileType" [ngSwitch]="fileInfo.FileType">
+<ng-container
-  <ucap-chat-message-box-attach-file *ngSwitchCase="FileType.File" [fileInfo]="fileInfo" (save)="onSave($event)">
+  *ngIf="fileInfo && fileInfo.FileType"
+  [ngSwitch]="fileInfo.FileType"
+>
+  <ucap-chat-message-box-attach-file
+    *ngSwitchCase="FileType.File"
+    [fileInfo]="fileInfo"
+    [expired]="getExpiredFile()"
+    (save)="onSave($event)"
+  >
   </ucap-chat-message-box-attach-file>
-  <ucap-chat-message-box-image *ngSwitchCase="FileType.Image" [fileInfo]="fileInfo"
+  <ucap-chat-message-box-attach-file
-    (click)="onClickImageViewer(fileInfo)"></ucap-chat-message-box-image>
+    *ngSwitchCase="FileType.Sound"
-  <ucap-chat-message-box-video *ngSwitchCase="FileType.Video" [fileInfo]="fileInfo"
+    [fileInfo]="fileInfo"
-    (click)="onClickImageViewer(fileInfo)"></ucap-chat-message-box-video>
+    [expired]="getExpiredFile()"
-  <ucap-chat-message-box-text *ngSwitchDefault [message]="message"></ucap-chat-message-box-text>
+    (save)="onSave($event)"
+  >
+  </ucap-chat-message-box-attach-file>
+  <ucap-chat-message-box-image
+    *ngSwitchCase="FileType.Image"
+    [fileInfo]="fileInfo"
+    [expired]="getExpiredFile()"
+    (click)="onClickImageViewer(fileInfo)"
+  ></ucap-chat-message-box-image>
+  <ucap-chat-message-box-video
+    *ngSwitchCase="FileType.Video"
+    [fileInfo]="fileInfo"
+    [expired]="getExpiredFile()"
+    (click)="onClickImageViewer(fileInfo)"
+  ></ucap-chat-message-box-video>
+  <ucap-chat-message-box-text
+    *ngSwitchDefault
+    [message]="message"
+  ></ucap-chat-message-box-text>
 </ng-container>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
-import { Info } from '@ucap-webmessenger/protocol-event';
+import { Info, InfoResponse } from '@ucap-webmessenger/protocol-event';
 import { StatusCode } from '@ucap-webmessenger/api';
 import { FileType } from '@ucap-webmessenger/protocol-file';
 import { NGXLogger } from 'ngx-logger';
@@ -13,6 +13,8 @@ import { FileInfo } from '../../models/file-info.json';
 export class FileComponent implements OnInit {
   @Input()
   message: Info;
+  @Input()
+  eventInfoStatus: InfoResponse;
 
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
@@ -34,6 +36,17 @@ export class FileComponent implements OnInit {
     }
   }
 
+  getExpiredFile() {
+    if (
+      !!this.eventInfoStatus &&
+      this.eventInfoStatus.validFileBaseSeq < this.message.seq
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
   onClickImageViewer(fileInfo: FileInfo) {
     this.imageViewer.emit(this.fileInfo);
   }

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

@@ -10,6 +10,8 @@ import { FileInfo } from '../../models/file-info.json';
 export class ImageComponent implements OnInit {
   @Input()
   fileInfo: FileInfo;
+  @Input()
+  expired = false;
 
   constructor(private logger: NGXLogger) {}
 

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

@@ -10,6 +10,8 @@ import { FileInfo } from '../../models/file-info.json';
 export class VideoComponent implements OnInit {
   @Input()
   fileInfo: FileInfo;
+  @Input()
+  expired = false;
 
   constructor(private logger: NGXLogger) {}
 

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

@@ -103,6 +103,7 @@
               </ucap-chat-message-box-mass>
               <ucap-chat-message-box-file
                 *ngSwitchCase="EventType.File"
+                [eventInfoStatus]="eventInfoStatus"
                 [message]="message"
                 (save)="onSave($event)"
                 (imageViewer)="onImageViewer($event)"

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

@@ -7,7 +7,11 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { Info, EventType } from '@ucap-webmessenger/protocol-event';
+import {
+  Info,
+  EventType,
+  InfoResponse
+} from '@ucap-webmessenger/protocol-event';
 import {
   LoginResponse,
   UserInfo
@@ -28,6 +32,8 @@ export class MessagesComponent implements OnInit {
   @Input()
   messages: Info[];
   @Input()
+  eventInfoStatus?: InfoResponse;
+  @Input()
   userInfos?: UserInfo[];
   @Input()
   sessionVerInfo: VersionInfo2Response;