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"  *ngIf="roomData$ | async as roomData"> {{ roomData.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">
          <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">
            {{ user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container>
          </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" #scrollMe >

    <div
    *ngFor="let message of messages1[roomId]; let messageIndex = index" class="messages-list-item-wrapper"
    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
    >
    <div class="message-container">

      <div class="d-flex justify-content-between">
        <div>
          <div>
            {{ message.message }}
          </div>

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

              <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
              <ion-label>{{ attachment.fileName}}</ion-label>
              <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
              <ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->

            </div>

            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
              <img  
              [src]="attachment.safeFile"
              (load)="onImageLoad(message, messageIndex)"
              (error)="onImageError()">
            </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">
              <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}}</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 (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="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
        <div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>

      </div>

      <!-- Emoji Picker -->
      <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
        <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
          {{ emoji }}
        </span>
      </div>
    </div>
    <!-- current emoji -->
    <div>
      <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 >

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