장문번역 기능 추가.

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

@@ -101,10 +101,16 @@
           (click)="onClickReceiveAlarm()"
           aria-label="Toggle Receive Alarm"
         >
-          <mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
+          <mat-icon
+            class="amber-fg"
+            *ngIf="roomInfo.receiveAlarm"
+            matTooltip="알림 켜짐"
             >notifications_active</mat-icon
           >
-          <mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm"
+          <mat-icon
+            class="secondary-text"
+            *ngIf="!roomInfo.receiveAlarm"
+            matTooltip="알림 꺼짐"
             >notifications_off</mat-icon
           >
         </button>

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

@@ -36,7 +36,8 @@ import {
   FileEventJson,
   StickerEventJson,
   MassTextEventJson,
-  TranslationEventJson
+  TranslationEventJson,
+  MassTranslationEventJson
 } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
@@ -75,7 +76,8 @@ import {
   FileTalkSaveRequest,
   FileTalkSaveResponse,
   TranslationReqRequest,
-  TranslationSaveRequest
+  TranslationSaveRequest,
+  TranslationSaveResponse
 } from '@ucap-webmessenger/api-common';
 import {
   CreateChatDialogComponent,
@@ -174,7 +176,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   translationSimpleview = false;
   translationPreview = false;
   destLocale = 'en'; // default English :: en
-  translationPreviewInfo: TranslationEventJson | null;
+  translationPreviewInfo: {
+    previewInfo: TranslationSaveResponse | null;
+    translationType: EventType.Translation | EventType.MassTranslation;
+  };
 
   /** About ReadHere */
   firstcheckReadHere = true;
@@ -620,8 +625,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
     if (!!this.isShowTranslation && this.destLocale.trim().length > 0) {
       /** CASE : Translation */
-      console.log('번역들어간다.');
-
       const destLocale = this.destLocale;
       const original = message;
       const roomSeq = this.roomInfo.roomSeq;
@@ -638,13 +641,21 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         .pipe(
           take(1),
           map(res => {
-            console.log(res);
             if (res.statusCode === StatusCode.Success) {
+              let sentMessage = '';
+              let eventType = EventType.Translation;
+              let previewObject:
+                | TranslationEventJson
+                | MassTranslationEventJson;
+
               if (res.translationSeq > 0) {
                 // Mass Text Translation
+                previewObject = res;
+                sentMessage = res.returnJson;
+                eventType = EventType.MassTranslation;
               } else {
                 // Normal Text Translation
-                const json: TranslationEventJson = {
+                previewObject = {
                   locale: destLocale,
                   original,
                   translation: res.translation,
@@ -654,32 +665,38 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                     : ''
                 };
 
-                if (!!this.translationPreview) {
+                sentMessage = JSON.stringify(previewObject);
-                  // preview
+                eventType = EventType.Translation;
-                  this.translationPreviewInfo = json;
+              }
-                } else {
-                  // direct send
-                  this.store.dispatch(
-                    EventStore.send({
-                      senderSeq: this.loginRes.userSeq,
-                      req: {
-                        roomSeq,
-                        eventType: EventType.Translation,
-                        sentMessage: JSON.stringify(json)
-                      }
-                    })
-                  );
 
-                  if (!!this.translationPreviewInfo) {
+              if (!!this.translationPreview) {
-                    this.translationPreviewInfo = null;
+                // preview
-                  }
+                this.translationPreviewInfo = {
-                }
+                  previewInfo: res,
+                  translationType: eventType
+                };
+              } else {
+                // direct send
+                this.store.dispatch(
+                  EventStore.send({
+                    senderSeq: this.loginRes.userSeq,
+                    req: {
+                      roomSeq,
+                      eventType,
+                      sentMessage
+                    }
+                  })
+                );
 
-                if (!!this.selectedSticker) {
+                if (!!this.translationPreviewInfo) {
-                  this.isShowStickerSelector = false;
+                  this.translationPreviewInfo = null;
-                  this.setStickerHistory(this.selectedSticker);
                 }
               }
+
+              if (!!this.selectedSticker) {
+                this.isShowStickerSelector = false;
+                this.setStickerHistory(this.selectedSticker);
+              }
             } else {
               this.logger.error(res);
             }
@@ -1470,14 +1487,32 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   onCancelTranslation() {
     this.translationPreviewInfo = null;
   }
-  onSendTranslationMessage(translationInfo: TranslationEventJson) {
+  onSendTranslationMessage(params: {
+    previewInfo: TranslationSaveResponse | null;
+    translationType: EventType.Translation | EventType.MassTranslation;
+  }) {
+    let sentMessage = '';
+    if (params.translationType === EventType.MassTranslation) {
+      // Mass Text Translation
+      sentMessage = params.previewInfo.returnJson;
+    } else {
+      // Normal Text Translation
+      sentMessage = JSON.stringify({
+        locale: params.previewInfo.destLocale,
+        original: params.previewInfo.original,
+        translation: params.previewInfo.translation,
+        stickername: '',
+        stickerfile: !!this.selectedSticker ? this.selectedSticker.index : ''
+      });
+    }
+
     this.store.dispatch(
       EventStore.send({
         senderSeq: this.loginRes.userSeq,
         req: {
           roomSeq: this.roomInfo.roomSeq,
-          eventType: EventType.Translation,
+          eventType: params.translationType,
-          sentMessage: JSON.stringify(translationInfo)
+          sentMessage
         }
       })
     );

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

@@ -1,23 +1,26 @@
 <div class="translation-main">
-  <div class="original">
+  <div
-    {{ message.sentMessageJson.translation }}
+    *ngIf="!translationSimpleview || (!!translationSimpleview && !!isMe)"
-  </div>
+    class="original"
-  <div class="translation">
+    [innerHTML]="message.sentMessageJson.original | linky"
-    <span class="language">Kor</span>
+  ></div>
-    녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+  <div
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
+    *ngIf="!translationSimpleview || (!!translationSimpleview && !isMe)"
-    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    class="translation"
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
+  >
-    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    <span class="language">{{ message.sentMessageJson.destLocale }}</span>
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
+    <span [innerHTML]="message.sentMessageJson.translation | linky"> </span>
   </div>
   <div class="btn-box">
     <ul>
       <li>
-        <button mat-button>Save</button>
+        <button mat-button>전체보기</button>
       </li>
       <li>
-        <button mat-button><span class="language">Kor</span>번역보기</button>
+        <button mat-button>
+          <span class="language">{{ message.sentMessageJson.destLocale }}</span
+          >번역보기
+        </button>
       </li>
     </ul>
   </div>

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

@@ -1,5 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { TranslationEventJson, Info } from '@ucap-webmessenger/protocol-event';
+import {
+  TranslationEventJson,
+  Info,
+  MassTranslationEventJson
+} from '@ucap-webmessenger/protocol-event';
 
 @Component({
   selector: 'ucap-chat-message-box-mass-translation',
@@ -8,7 +12,13 @@ import { TranslationEventJson, Info } from '@ucap-webmessenger/protocol-event';
 })
 export class MassTranslationComponent implements OnInit {
   @Input()
-  message: Info<TranslationEventJson>;
+  message: Info<MassTranslationEventJson>;
+
+  @Input()
+  translationSimpleview: boolean;
+
+  @Input()
+  isMe: boolean;
 
   constructor() {}
 

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

@@ -131,14 +131,14 @@
           *ngIf="getUserProfile(message.senderSeq) != ''"
           class="profile-img thumbnail-mask"
         >
-            <img
+          <img
-              class="avatar"
+            class="avatar"
-              ucapImage
+            ucapImage
-              [base]="profileImageRoot"
+            [base]="profileImageRoot"
-              [path]="getUserProfile(message.senderSeq)"
+            [path]="getUserProfile(message.senderSeq)"
-              [default]="'assets/images/img_nophoto_50.png'"
+            [default]="'assets/images/img_nophoto_50.png'"
-              (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
+            (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
-            />
+          />
           <!-- <ucap-ui-imaage
             [style]="'width: 50px; height: 50px;'"
             [imageClass]="'avatar'"
@@ -203,6 +203,14 @@
                 [isMe]="message.senderSeq === loginRes.userSeq"
                 class="information-msg"
               ></ucap-chat-message-box-translation>
+              <ucap-chat-message-box-mass-translation
+                *ngSwitchCase="EventType.MassTranslation"
+                [message]="message"
+                [translationSimpleview]="translationSimpleview"
+                [isMe]="message.senderSeq === loginRes.userSeq"
+                class="information-msg"
+              >
+              </ucap-chat-message-box-mass-translation>
 
               <ucap-chat-message-box-allim
                 *ngSwitchCase="EventType.AllimTms"
@@ -218,8 +226,7 @@
               </ucap-chat-message-box-allim>
 
               <div *ngSwitchDefault>
-                <!-- mass-translation
+                <!--
-                <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
                 notice
                 <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
                 video-conference

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

@@ -2,12 +2,13 @@
   *ngIf="
     isShowTranslationPreview &&
     !!translationPreviewInfo &&
-    !!translationPreviewInfo.translation
+    !!translationPreviewInfo.previewInfo &&
+    !!translationPreviewInfo.previewInfo.translation
   "
   class="translation-preview"
 >
   <span class="translation-section">
-    {{ translationPreviewInfo.translation }}
+    {{ translationPreviewInfo.previewInfo.translation }}
   </span>
 
   <button
@@ -56,53 +57,3 @@
     >
   </form>
 </div>
-<!-- <div *ngIf="currentSticker" class="selected-sticker">
-  <img [src]="getStickerContentsImage(currentSticker)" />
-  <span class="btn-close">
-    <button
-      mat-button
-      matSuffix
-      mat-icon-button
-      aria-label="Close"
-      (click)="onClickClose()"
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  </span>
-</div>
-<div class="sticker-selector">
-  <mat-tab-group
-    mat-stretch-tabs
-    animationDuration="0ms"
-    (selectedIndexChange)="onSelectedIndexChange($event)"
-  >
-    <mat-tab
-      *ngFor="let stickerInfo of stickerInfoList; let idx = index"
-      [aria-label]="stickerInfo.title"
-    >
-      <ng-template mat-tab-label>
-        <img
-          #stickerTitle
-          [matTooltip]="stickerInfo.title"
-          matTooltipPosition="after"
-          [src]="getStickerTitleImage(stickerInfo, false, idx)"
-          (mouseover)="
-            stickerTitle.src = getStickerTitleImage(stickerInfo, true, idx)
-          "
-          (mouseout)="
-            stickerTitle.src = getStickerTitleImage(stickerInfo, false, idx)
-          "
-        />
-      </ng-template>
-      <div fxFlex fxLayout="row" fxLayoutGap="20px" class="sticker-item-box">
-        <div
-          *ngFor="let sticker of getStickerInfos(stickerInfo)"
-          (click)="onClickSelectSticker(sticker)"
-          class="sticker-item"
-        >
-          <img [src]="getStickerContentsImage(sticker)" />
-        </div>
-      </div>
-    </mat-tab>
-  </mat-tab-group>
-</div> -->

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

@@ -7,7 +7,12 @@ import {
 } from '@ucap-webmessenger/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { MatSlideToggleChange, MatSelectChange } from '@angular/material';
-import { TranslationEventJson } from '@ucap-webmessenger/protocol-event';
+import {
+  TranslationEventJson,
+  MassTranslationEventJson,
+  EventType
+} from '@ucap-webmessenger/protocol-event';
+import { TranslationSaveResponse } from '@ucap-webmessenger/api-common';
 
 @Component({
   selector: 'ucap-translation-section',
@@ -22,7 +27,10 @@ export class TranslationSectionComponent implements OnInit {
   @Input()
   preView: boolean;
   @Input()
-  translationPreviewInfo: TranslationEventJson | null;
+  translationPreviewInfo: {
+    previewInfo: TranslationSaveResponse | null;
+    translationType: EventType.Translation | EventType.MassTranslation;
+  };
 
   @Output()
   changeTranslationSimpleview = new EventEmitter<boolean>();
@@ -33,7 +41,10 @@ export class TranslationSectionComponent implements OnInit {
   @Output()
   cancelTranslation = new EventEmitter<void>();
   @Output()
-  sendTranslationMessage = new EventEmitter<TranslationEventJson>();
+  sendTranslationMessage = new EventEmitter<{
+    previewInfo: TranslationSaveResponse | null;
+    translationType: EventType.Translation | EventType.MassTranslation;
+  }>();
 
   isShowTranslationSimpleview = false;
   isShowTranslationPreview = false;
@@ -171,7 +182,10 @@ export class TranslationSectionComponent implements OnInit {
     this.changeTranslationPreview.emit(event.checked);
   }
 
-  onClickSendTranslationMessage(translationInfo: TranslationEventJson) {
+  onClickSendTranslationMessage(translationInfo: {
+    previewInfo: TranslationSaveResponse | null;
+    translationType: EventType.Translation | EventType.MassTranslation;
+  }) {
     this.sendTranslationMessage.emit(translationInfo);
   }