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

<!-- MESSAGE -->
<div
  #mbContainer
  class="message-row"
  [ngClass]="{
    me: mine,
    contact: !mine,
    highlight: highlight
  }"
>
  <ucap-chat-message-box-read-here
    id="message-box-readhere"
    *ngIf="existReadToHere"
    class="date-splitter"
  >
  </ucap-chat-message-box-read-here>

  <ucap-chat-message-box-date-splitter
    *ngIf="dateChanged"
    class="date-splitter"
    [message]="message"
  >
  </ucap-chat-message-box-date-splitter>

  <div
    class="chat-row"
    [@shake]="{
      value: shakeIt,
      params: { duration: 1000, delay: 0, translate: '2px' }
    }"
  >
    <div *ngIf="isInformation(message); then information; else contents"></div>
    <ng-template #information>
      <ng-container
        class="bubble"
        *ngIf="message.type !== EventType.NotificationForTimerRoom"
        [ngSwitch]="message.type"
      >
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.Join"
          [message]="message"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.Exit"
          [message]="message"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.ForcedExit"
          [message]="message"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.RenameRoom"
          [message]="message"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.GuideForRoomTimerChanged"
          [message]="message"
          [senderName]="senderName"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.NotificationForiOSCapture"
          [message]="message"
          [senderName]="senderName"
          class="information-msg"
        >
        </ucap-chat-message-box-information>
      </ng-container>
    </ng-template>
    <ng-template #contents>
      <div *ngIf="profileImage != ''" class="profile-img thumbnail-mask">
        <img
          class="avatar"
          ucapImage
          [base]="profileImageRoot"
          [path]="profileImage"
          [default]="'assets/images/img_nophoto_50.png'"
          (click)="onClickOpenProfile($event, message.senderSeq)"
        />
        <!-- <ucap-ui-imaage
            [style]="'width: 50px; height: 50px;'"
            [imageClass]="'avatar'"
            [base]="profileImageRoot"
            [path]="profileImage"
            [default]="'assets/images/img_nophoto_50.png'"
          ></ucap-ui-imaage> -->
      </div>

      <div class="message-main-container">
        <div class="message-main">
          <div class="chat-name">
            {{ senderName }}
          </div>

          <div class="bubble">
            <ng-container
              class="bubble"
              *ngIf="message.type !== EventType.NotificationForTimerRoom"
              [ngSwitch]="message.type"
            >
              <ucap-chat-message-box-mass
                *ngSwitchCase="EventType.MassText"
                [message]="message"
                (massDetail)="onMassDetail($event)"
                (contextmenu)="onContextMenu($event, message)"
              >
              </ucap-chat-message-box-mass>
              <ucap-chat-message-box-file
                *ngSwitchCase="EventType.File"
                [eventInfoStatus]="eventInfoStatus"
                [message]="message"
                (save)="onSave($event)"
                (fileViewer)="onFileViewer($event)"
                (contextmenu)="onContextMenu($event, message)"
              >
              </ucap-chat-message-box-file>
              <ucap-chat-message-box-sticker
                *ngSwitchCase="EventType.Sticker"
                [message]="message"
                (contextmenu)="onContextMenu($event, message)"
              >
              </ucap-chat-message-box-sticker>
              <ucap-chat-message-box-recall
                *ngSwitchCase="EventType.RecalledMessage"
              ></ucap-chat-message-box-recall>
              <ucap-chat-message-box-text
                *ngSwitchCase="EventType.Character"
                [message]="message"
                (contextmenu)="onContextMenu($event, message)"
              >
              </ucap-chat-message-box-text>
              <ucap-chat-message-box-schedule
                *ngSwitchCase="EventType.Plan"
                [message]="message"
                (contextmenu)="onContextMenu($event, message)"
              >
              </ucap-chat-message-box-schedule>
              <ucap-chat-message-box-translation
                *ngSwitchCase="EventType.Translation"
                [message]="message"
                [translationSimpleview]="translationSimpleview"
                [isMe]="mine"
                (contextMenu)="onContextMenu($event, message)"
                class="information-msg"
              ></ucap-chat-message-box-translation>
              <ucap-chat-message-box-mass-translation
                *ngSwitchCase="EventType.MassTranslation"
                class="information-msg"
                [message]="message"
                [translationSimpleview]="translationSimpleview"
                [isMe]="mine"
                (contextMenu)="onContextMenu($event, message)"
                (massTranslationDetail)="onMassTranslationDetail($event)"
              >
              </ucap-chat-message-box-mass-translation>
              <ucap-chat-message-box-video-conference
                *ngSwitchCase="EventType.VideoConference"
                [message]="message"
              >
              </ucap-chat-message-box-video-conference>

              <ucap-chat-message-box-allim
                *ngSwitchCase="EventType.AllimTms"
                [message]="message"
                class="information-msg"
              >
              </ucap-chat-message-box-allim>
              <ucap-chat-message-box-allim
                *ngSwitchCase="EventType.AllimElephant"
                [message]="message"
                class="information-msg"
              >
              </ucap-chat-message-box-allim>

              <div *ngSwitchDefault>
                <!--
                  notice
                  <ucap-chat-message-box-notice></ucap-chat-message-box-notice>

                  <div class="message">
                    {{ message.sentMessage }}
                  </div> -->
                {{ message.type }} / {{ message.sentMessage }}
              </div>
            </ng-container>
          </div>
        </div>

        <div class="time secondary-text">
          <ul>
            <li *ngIf="unreadCount" class="unread">{{ unreadCount }}</li>
            <li>
              {{ message.sendDate | ucapDate: 'a hh:mm' }}
            </li>
          </ul>
        </div>
      </div>
    </ng-template>
  </div>
</div>