doneit-web/src/app/ui/chat/component/messages/messages.page.html

<ion-header class="ion-no-border" >
  <ion-toolbar class="header-toolbar" >
    <div class="main-header">
      <div class="header-top">
        <div class="middle" >
          <ion-label class="title"> {{ room?.roomName }}</ion-label>
          <!-- <button (click)="ChatMessageDebuggingPage()">Dev</button> -->
          <span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus" class="online" name="ellipse"></ion-icon></span>
        </div>
        <div class="right">
          <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()" >
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
            </ion-icon>
          </button>
        </div>
      </div>
      <div class="d-flex header-bottom" >
        <div class="header-bottom-icon" *ngIf="roomType == RoomTypeEnum.Group">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
        </div>

        <ion-list class="header-bottom-contacts"  *ngIf="roomMembers$ | async as memberList" >
          <ng-container *ngFor="let user of memberList; let i = index">
          <span *ngIf="roomType == RoomTypeEnum.Group"> {{ user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container> </span>
          </ng-container>
        </ion-list>


      </div>
    </div>
    <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
      <ion-refresher-content>
      </ion-refresher-content>
    </ion-refresher>
  </ion-toolbar>
</ion-header>

<ion-content  >

  <div class="messages height-100 width-100 d-flex flex-column rotate-div" #scrollMe >

    <div
      *ngFor="let message of messages1[room?.$id]; let messageIndex = index" class="messages-list-item-wrapper px-10-em"
      [ngClass]="{
        'info-meeting': message.messageType == IMessageType.information && !message.ballon,
        'info-ballon': message.ballon == true,
        'my-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId === SessionStore.user.UserId && !message.ballon,
        'other-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId !== SessionStore.user.UserId && !message.ballon
      }"
    >
      <!-- Emoji Picker -->
      <div *ngIf="selectedMessage === message" class="emoji-picker mr-20" [ngStyle]="{'bottom': '0', 'right': '0'}">
        <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
          {{ emoji }}
        </span>
      </div>

      <div class="message-container rotate-div" *ngIf="message.showMessage">
        <div class="d-flex justify-content-between">
          <div>
            <div style="white-space: pre-line;">
              {{ message.message }}
            </div>

            <div *ngFor="let attachment of message.attachments; let i = index">

              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
                <img
                  *ngIf="message.oneShot != true && attachment.blobURl != true"
                  [src]="attachment.safeFile"
                  (load)="onImageLoad(message, messageIndex)"
                  (error)="onImageError()"
                >

                <img
                  *ngIf="message.oneShot != true && attachment.blobURl"
                  [src]="attachment.safeFile|safehtml"
                  (load)="onImageLoad(message, messageIndex)"
                  (error)="onImageError()"
                >

                <div *ngIf="SessionStore.user.UserId == message.sender.wxUserId && message.oneShot == true">
                  Mandou uma mensagen com visualização única
                </div>

                <div *ngIf="SessionStore.user.UserId != message.sender.wxUserId && message.oneShot == true">
                <!-- <div *ngIf="message.oneShot == true" class="cursor-pointer"> -->
                  <div (click)="viewOnce($event, message, i)">
                    Abrir a visualização única
                  </div>
                </div>

              </div>

              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
                <audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
              </div>

              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc"  class="d-flex" (click)="openPreview(message)">
                <ion-icon *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix"  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
                <fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                <fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
                </fa-icon>
                <fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
                <fa-icon
                  *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
                  icon="file-word" class="excel-icon"></fa-icon>
                <ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
                </ion-icon>
                <ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
                </ion-icon>

                <ion-label>{{ attachment?.fileName || attachment?.description }}</ion-label>
              </div>
            </div>

          </div>

          <div>
            <div class="message-item-options d-flex justify-content-end">
              <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
              <mat-menu #beforeMenu="matMenu" xPosition="before">
                <button (click)="messageDelete(message)" class="menuButton">Apagar mensagem</button>
                <button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
                <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
              </mat-menu>
            </div>

          </div>

        </div>
        <div style="text-align: end;">

          <div *ngIf="totalMembers != 0 && SessionStore.user.UserId == message.sender.wxUserId">
            <ion-icon *ngIf="messageStatus(message) == 'enviar'" src="assets/images/clock-regular.svg"></ion-icon>
            <ion-icon *ngIf="messageStatus(message) == 'enviado'" src="assets/images/check-solid.svg"></ion-icon>
            <ion-icon *ngIf="messageStatus(message) == 'allReceived'" src="assets/images/check-double-solid.svg"></ion-icon>
            <ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
          </div>
        </div>

      </div>
      <div class="message-container rotate-div" *ngIf="message.isDeleted == true">
        Mensagem foi eliminada
      </div>
      <div *ngIf="message.messageType == IMessageType.information && !message.ballon" class="text-center">
        {{ message.message }}
      </div>
      <div *ngIf="message.ballon" class="text-center ballon">
        {{ message.message }}
      </div>
      <div class="rotate-div emoji-container" *ngIf="message.isDeleted != true && message.messageType != IMessageType.information && message.ballon != true">
        <span *ngFor="let reaction of message.reactions" class="emoji-icon">
          {{ reaction.reaction }}
        </span>
      </div>
    </div>


  </div>


  <ion-fab horizontal="start" vertical="bottom" slot="fixed">

    <div #array>

    </div>
  </ion-fab>

</ion-content>


<!-- <ion-footer (click)="ChatSystemService.getDmRoom(roomId).sendReadMessage()"> -->
<ion-footer (click)="sendReadMessage()">

  <!-- <div class="typing" *ngIf="ChatSystemService.getDmRoom(roomId).otherUserType == true" >
    <ngx-letters-avatar *ngIf="showAvatar"
    [avatarName]=  "ChatSystemService.getDmRoom(roomId).name"
    [width]="30"
    [circular]="true"
    fontFamily="Roboto"></ngx-letters-avatar>
    está a escrever...
  </div> -->
  <div class="width-100 pl-20 pr-20">
    <span >{{durationDisplay}}</span>
    <div class=" audioDiv d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded">
    <div (click)="start(audioRecordedSafe)" *ngIf="!isPlaying" > <ion-icon slot="icon-only" name="play"></ion-icon> </div>
    <div (click)="togglePlayer(isPlaying)" *ngIf="isPlaying"> <ion-icon slot="icon-only" name="pause"></ion-icon> </div>
    <ion-range #range [(ngModel)]="audioProgress" max="100" (mouseup)="seek()"></ion-range>
    </div>
  </div>

  <div class="container width-100 d-flex">
    <div>
      <ion-fab *ngIf="!recording && !lastAudioRecorded && allowTyping" horizontal="start" vertical="bottom" slot="fixed">
        <ion-fab-button color="light" size="small">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <!-- <ion-fab-button *ngIf="p.userPermission([p.permissionList.Agenda.access])" title="Nova Reunião" (click)="bookMeeting()" color="light">
            <ion-icon name="calendar"></ion-icon>
          </ion-fab-button> -->
          <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
            <ion-icon name="document"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Anexar Fotografia" (click)="pickPicture()" color="light">
            <ion-icon name="image"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Tirar Fotografia" (click)="takePictureMobile()" color="light">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Documento da Gestão Documental" (click)="addFileWebtrix()" color="light">
            <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>
      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
        <fa-icon class="icon-size-27" icon="trash"></fa-icon>
      </button>
    </div>

    <div class="width-100">
      <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
        <ion-textarea  *ngIf="allowTyping" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="textField" (ionChange)="sendTyping()" (click)="sendReadAt()"></ion-textarea>
      </div>
      <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
        <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
          <ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
        </button>
      </div>
    </div>


    <div class="btn-send">
      <button #recordbtn *ngIf="textField == '' && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
      </button>
      <button *ngIf="textField != ''" class="btn-no-color" (click)="sendMessage()">
        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
      </button>
      <button *ngIf="textField == '' && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
      </button>
    </div>

  </div>
</ion-footer>