385 lines
13 KiB
HTML
385 lines
13 KiB
HTML
<!-- CHAT -->
|
|
<div class="container" fxFlex fxLayout="column">
|
|
<!-- CHAT TOOLBAR -->
|
|
<mat-toolbar class="chat-toolbar">
|
|
<div fxFlex fxLayout="row" class="chat-header">
|
|
<div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
|
|
<!-- RESPONSIVE CHATS BUTTON-->
|
|
<button
|
|
mat-icon-button
|
|
aria-label="chats button"
|
|
class="responsive-chats-button"
|
|
>
|
|
<!--<mat-icon>chat</mat-icon>-->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
|
|
c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
|
|
c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
|
|
c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
|
|
c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<circle cx="9" cy="12" r="1" />
|
|
<circle cx="12.5" cy="12" r="1" />
|
|
<circle cx="16" cy="12" r="1" />
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
<!-- / RESPONSIVE CHATS BUTTON-->
|
|
<button
|
|
mat-icon-button
|
|
aria-label="chats button"
|
|
class="responsive-chats-button chat-timer"
|
|
*ngIf="!!roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
|
|
>
|
|
<mat-icon>timer</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="room-info">
|
|
<div
|
|
*ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
|
|
class="room-type text-accent-color "
|
|
>
|
|
<span class="bg-accent-darkest"
|
|
>{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
|
|
</span>
|
|
</div>
|
|
<h3 class="room-name">
|
|
<ng-container
|
|
*ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
|
|
>
|
|
{{ 'chat.getRoomNameInProgress' | translate }}
|
|
</ng-container>
|
|
<ng-container
|
|
*ngIf="!!roomInfoSubject.value && !!userInfoListSubject.value"
|
|
>
|
|
<ng-container [ngSwitch]="roomInfoSubject.value.roomType">
|
|
<ng-container *ngSwitchCase="RoomType.Mytalk">
|
|
MyTalk
|
|
</ng-container>
|
|
<ng-container
|
|
*ngSwitchCase="
|
|
RoomType.Bot ||
|
|
RoomType.Allim ||
|
|
RoomType.Allim_Elephant ||
|
|
RoomType.Allim_TMS
|
|
"
|
|
>
|
|
{{ _roomUserInfos | ucapTranslate: 'name':',' }}
|
|
</ng-container>
|
|
<ng-container *ngSwitchDefault>
|
|
<ng-template
|
|
[ngIf]="
|
|
!!roomInfoSubject.value.roomName &&
|
|
'' !== roomInfoSubject.value.roomName.trim()
|
|
"
|
|
[ngIfElse]="roomNameNotExist"
|
|
>
|
|
{{ roomInfoSubject.value.roomName }}
|
|
</ng-template>
|
|
<ng-template #roomNameNotExist>
|
|
{{ getRoomNameByRoomUser(_roomUserInfos) }}
|
|
</ng-template>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
</h3>
|
|
<!-- Timer Room Info -->
|
|
<!--<div
|
|
*ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
|
|
class="room-type text-accent-color "
|
|
>
|
|
<span class="bg-accent-darkest"
|
|
>{{
|
|
getConvertTimer(roomInfoSubject.value.timeRoomInterval)
|
|
}} </span
|
|
>{{ 'chat.isRoomTypeSecret' | translate }}
|
|
</div>-->
|
|
<!-- Timer Room Info -->
|
|
</div>
|
|
<div class="room-option">
|
|
<button
|
|
*ngIf="!!roomInfoSubject.value"
|
|
mat-icon-button
|
|
(click)="onClickReceiveAlarm()"
|
|
aria-label="Toggle Receive Alarm"
|
|
>
|
|
<!--<mat-icon
|
|
class="amber-fg"
|
|
*ngIf="roomInfoSubject.value.receiveAlarm"
|
|
matTooltip="{{ 'chat.notificationIsOn' | translate }}"
|
|
>notifications_active</mat-icon>-->
|
|
<mat-icon
|
|
class="icon-button"
|
|
*ngIf="roomInfoSubject.value.receiveAlarm"
|
|
matTooltip="{{ 'chat.notificationIsOn' | translate }}"
|
|
><i class="mid mdi-bell-ring-outline"></i
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
class="icon-button"
|
|
*ngIf="!roomInfoSubject.value.receiveAlarm"
|
|
matTooltip="{{ 'chat.notificationIsOff' | translate }}"
|
|
><i class="mid mdi-bell-off-outline"></i
|
|
></mat-icon>
|
|
</button>
|
|
|
|
<button
|
|
mat-icon-button
|
|
#chatMenuTrigger="matMenuTrigger"
|
|
[matMenuTriggerFor]="contactMenu"
|
|
[matMenuTriggerRestoreFocus]="false"
|
|
aria-label="more"
|
|
>
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-search-frame">
|
|
<div
|
|
*ngIf="eventListProcessing$ | async"
|
|
style="position: absolute; width: 100%;"
|
|
>
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
</div>
|
|
<div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
|
|
<ucap-chat-search
|
|
[totalCount]="searchTotalCount"
|
|
[curIndex]="searchCurrentIndex"
|
|
(searchText)="onSearchChat($event)"
|
|
(prevSearch)="onPrevSearch()"
|
|
(nextSearch)="onNextSearch()"
|
|
(searchAndPrev)="onSearchAndPrev()"
|
|
(closeSearchArea)="onCloseSearchArea()"
|
|
></ucap-chat-search>
|
|
</div>
|
|
</div>
|
|
</mat-toolbar>
|
|
<!-- / CHAT TOOLBAR -->
|
|
|
|
<!-- CHAT CONTENT -->
|
|
<div
|
|
fxFlex="1 1 auto"
|
|
class="chat-content"
|
|
ucapFileUploadFor
|
|
[fileUploadQueue]="fileUploadQueue"
|
|
(fileSelected)="onFileSelected($event)"
|
|
(fileDragEnter)="onFileDragEnter($event)"
|
|
(fileDragOver)="onFileDragOver()"
|
|
(fileDragLeave)="onFileDragLeave()"
|
|
>
|
|
<!-- CHAT MESSAGES -->
|
|
<!-- [translationSimpleview]="translationSimpleview" (massTranslationDetail)="onMassTranslationDetail($event)" -->
|
|
<ucap-chat-messages
|
|
#chatMessages
|
|
[eventList$]="eventListSubject.asObservable()"
|
|
[newEventList$]="eventListNewSubject.asObservable()"
|
|
[searchedList$]="searchedListSubject.asObservable()"
|
|
[roomInfo$]="roomInfoSubject.asObservable()"
|
|
[eventInfoStatus$]="eventInfoStatusSubject.asObservable()"
|
|
[eventRemained$]="eventRemainedSubject.asObservable()"
|
|
[userInfos$]="userInfoListSubject.asObservable()"
|
|
[loginRes$]="loginResSubject.asObservable()"
|
|
[lock$]="lockSubject.asObservable()"
|
|
[sessionVerInfo]="sessionVerInfo"
|
|
[isShowUnreadCount]="getShowUnreadCount()"
|
|
[clearReadHere]="clearReadHere"
|
|
[minShowReadHere]="
|
|
environment.productConfig.CommonSetting.readHereShowMinimumEventCount
|
|
"
|
|
[searchingMode]="moreSearchProcessing"
|
|
(moreEvent)="onMoreEvent($event)"
|
|
(massDetail)="onMassDetail($event)"
|
|
(save)="onSave($event)"
|
|
(fileViewer)="onFileViewer($event)"
|
|
(contextMenu)="onContextMenuMessage($event)"
|
|
(openProfile)="onClickOpenProfile($event)"
|
|
(scrollUp)="onScrollupMessages($event)"
|
|
(yReachStart)="onYReachStartMessages($event)"
|
|
(yReachEnd)="onYReachEndMessages($event)"
|
|
(existNewMessage)="onExistNewMessage($event)"
|
|
>
|
|
</ucap-chat-messages>
|
|
|
|
<!-- CHAT MESSAGES -->
|
|
<div class="file-drop-zone-container">
|
|
<ucap-file-upload-queue
|
|
#fileUploadQueue
|
|
[dropZoneIncludeParent]="true"
|
|
class="file-drop-zone"
|
|
>
|
|
</ucap-file-upload-queue>
|
|
</div>
|
|
</div>
|
|
<!-- / CHAT CONTENT -->
|
|
|
|
<!-- sticker-selector -->
|
|
<div class="sticker-selector-container">
|
|
<ucap-sticker-selector
|
|
*ngIf="isShowStickerSelector"
|
|
#stickerSelector
|
|
[stickerHistory]="getStickerHistory()"
|
|
(selectedSticker)="onSelectedSticker($event)"
|
|
(closeSticker)="onShowToggleStickerSelector()"
|
|
class="sticker-selector-zone"
|
|
></ucap-sticker-selector>
|
|
<div></div>
|
|
</div>
|
|
<!-- / sticker-selector -->
|
|
|
|
<!-- Translation
|
|
<div class="translation-container">-->
|
|
<!-- <ucap-translation-section
|
|
*ngIf="isShowTranslation"
|
|
[destLocale]="destLocale"
|
|
[simpleView]="translationSimpleview"
|
|
[preView]="translationPreview"
|
|
[translationPreviewInfo]="translationPreviewInfo"
|
|
(changeTranslationSimpleview)="onChangeTranslationSimpleView($event)"
|
|
(changeTranslationPreview)="onChangeTranslationPreView($event)"
|
|
(changeDestLocale)="onChangeDestLocale($event)"
|
|
(cancelTranslation)="onCancelTranslation($event)"
|
|
(sendTranslationMessage)="onSendTranslationMessage($event)"
|
|
>
|
|
</ucap-translation-section> -->
|
|
<!-- </div>
|
|
/ Translation -->
|
|
|
|
<!-- CHAT FOOTER -->
|
|
<div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
|
|
<!-- REPLY FORM -->
|
|
<ucap-chat-form
|
|
#chatForm
|
|
[fileUploadQueue]="fileUploadQueue"
|
|
(send)="onSendMessage($event)"
|
|
(sendFiles)="onFileSelected($event)"
|
|
(clearView)="clearView()"
|
|
(toggleStickerSelector)="onShowToggleStickerSelector($event)"
|
|
(clipboardPaste)="onClipboardPaste($event)"
|
|
>
|
|
</ucap-chat-form>
|
|
<!-- / REPLY FORM -->
|
|
</div>
|
|
<!-- / CHAT FOOTER-->
|
|
</div>
|
|
<!-- / CHAT -->
|
|
|
|
<mat-menu #contactMenu="matMenu">
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('OPEN_ALBUM_LIST')"
|
|
(click)="onClickContextMenu('OPEN_ALBUM_LIST')"
|
|
>
|
|
{{ 'chat.albumBox.label' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('OPEN_FILE_LIST')"
|
|
(click)="onClickContextMenu('OPEN_FILE_LIST')"
|
|
>
|
|
{{ 'chat.fileBox.label' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('CHAT_SEARCH')"
|
|
(click)="onClickContextMenu('CHAT_SEARCH')"
|
|
>
|
|
{{ 'chat.searchEventByText' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('OPEN_ROOM_USER')"
|
|
(click)="onClickContextMenu('OPEN_ROOM_USER')"
|
|
>
|
|
{{ 'chat.listOfRoomMember' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('ADD_MEMBER')"
|
|
(click)="onClickContextMenu('ADD_MEMBER')"
|
|
>
|
|
{{ 'chat.addMemberToRoom' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('ADD_GROUP')"
|
|
(click)="onClickContextMenu('ADD_GROUP')"
|
|
>
|
|
{{ 'chat.addMemberToGroup' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('EDIT_ROOM')"
|
|
(click)="onClickContextMenu('EDIT_ROOM')"
|
|
>
|
|
{{ 'chat.settingsOfRoom' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getShowContextMenu('CLOSE_ROOM')"
|
|
(click)="onClickContextMenu('CLOSE_ROOM')"
|
|
>
|
|
{{ 'chat.closeRoom' | translate }}
|
|
</button>
|
|
</mat-menu>
|
|
|
|
<div
|
|
style="visibility: hidden; position: fixed"
|
|
[style.left]="messageContextMenuPosition.x"
|
|
[style.top]="messageContextMenuPosition.y"
|
|
#messageContextMenuTrigger="matMenuTrigger"
|
|
[matMenuTriggerFor]="messageContextMenu"
|
|
></div>
|
|
<mat-menu #messageContextMenu="matMenu">
|
|
<ng-template matMenuContent let-message="message" let-clicktype="clicktype">
|
|
<ng-container *ngIf="!isRecalledMessage(message.type)">
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="isCopyableMessage(message.type)"
|
|
(click)="onClickMessageContextMenu('COPY', message, clicktype)"
|
|
>
|
|
{{ 'chat.copyChatText' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="isForwardableMessage(message, roomInfoSubject.value)"
|
|
(click)="onClickMessageContextMenu('FORWARD', message)"
|
|
>
|
|
{{ 'chat.forwardEventTo' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="isForwardableMessage(message, roomInfoSubject.value)"
|
|
(click)="onClickMessageContextMenu('FORWARD_TO_ME', message)"
|
|
>
|
|
{{ 'chat.forwardEventToMe' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
(click)="onClickMessageContextMenu('DELETE', message)"
|
|
>
|
|
{{ 'chat.removeEvent' | translate }}
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="isRecallableMessage(message, loginResSubject.value.userSeq)"
|
|
(click)="onClickMessageContextMenu('RECALL', message)"
|
|
>
|
|
{{ 'chat.recallEvent' | translate }}
|
|
</button>
|
|
</ng-container>
|
|
</ng-template>
|
|
</mat-menu>
|