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

장문번역 기능 추가.

Browse Source
This commit is contained in:
leejinho 2019-12-31 16:10:24 +09:00
parent 0825f45b17
commit d08c7058bb
7 changed files with 141 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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) {
// preview
this.translationPreviewInfo = json;
} else {
// direct send
this.store.dispatch(
EventStore.send({
senderSeq: this.loginRes.userSeq,
req: {
roomSeq,
eventType: EventType.Translation,
sentMessage: JSON.stringify(json)
}
})
);
sentMessage = JSON.stringify(previewObject);
eventType = EventType.Translation;
}
if (!!this.translationPreviewInfo) {
this.translationPreviewInfo = null;
}
}
if (!!this.translationPreview) {
// 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) {
this.isShowStickerSelector = false;
this.setStickerHistory(this.selectedSticker);
if (!!this.translationPreviewInfo) {
this.translationPreviewInfo = null;
}
}
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,
sentMessage: JSON.stringify(translationInfo)
eventType: params.translationType,
sentMessage
}
})
);

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

@ -1,23 +1,26 @@
<div class="translation-main">
<div class="original">
{{ message.sentMessageJson.translation }}
</div>
<div class="translation">
<span class="language">Kor</span>
녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
<div
*ngIf="!translationSimpleview || (!!translationSimpleview && !!isMe)"
class="original"
[innerHTML]="message.sentMessageJson.original | linky"
></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>

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

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

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

@ -131,14 +131,14 @@
*ngIf="getUserProfile(message.senderSeq) != ''"
class="profile-img thumbnail-mask"
>
<img
class="avatar"
ucapImage
[base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'"
(click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
/>
<img
class="avatar"
ucapImage
[base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'"
(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

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

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

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

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