doneit-web/src/app/shared/publication/new-publication/new-publication.page.html

<ion-header class="ion-no-border background-white px-20 pt-25">
  <div class="title-content d-flex">
    <!--     <div class="back-icon">
      <ion-icon class="font-35-rem" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
    </div> -->
    <div class="div-title">
      <ion-label class="title">{{ publicationTitle }}</ion-label> <br>
      <i style="margin-top: -3px; font-size: 15px;"> Campos marcados com * são obrigatórios</i>
    </div>
  </div>
</ion-header>

<ion-content>
  <div class="content-container">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>

    <div *ngIf="publicationType!='1'" class="ion-item-container"
      [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
      <ion-input autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Title" name="title"
        placeholder="Título*"></ion-input>
    </div>

    <div *ngIf="publicationType!='1' " class="container-div pb-20">
      <div class="ion-item-class-2 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
        </div>
        <div class="ion-textarea-class flex-grow-1"
          [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
          <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Message"
            name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
        </div>
      </div>
    </div>


    <!-- <div *ngIf="publication">
    OriginalFileName: {{ publication.OriginalFileName }}
  </div> -->


    <!-- Captured -->
    <div class="ion-item-container-no-border" *ngIf="seletedContent.length > 0">
      <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label>
      <div class="d-flex justify-content-between">
        <div class="d-flex">

          <ion-thumbnail *ngFor="let seleted of seletedContent.slice(0, displayLimit), let i = index" lot="start">

            <ion-img *ngIf="checkFileType.checkFileType(seleted.FileExtension) == 'image'" 
              name="image" ngDefaultControl [src]="seleted.FileBase64"
              (click)="imageSize(seleted.FileBase64)"></ion-img>

            <video *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video'" width="70" height="70"
              controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
              <source type="video/mp4" [src]="seleted.FileBase64">
            </video>

          </ion-thumbnail>
          <!-- Display the blurred image and count if there are more images -->
          <ion-thumbnail *ngIf="seletedContent.length > displayLimit" lot="start">
            <ion-img [src]="'data:image/jpg;base64,' + seletedContent[displayLimit - 1].base64"
              style="filter: blur(5px);"></ion-img>
            
              <p>mais {{ seletedContent.length - displayLimit }}</p>
          </ion-thumbnail>

          <ion-label class="pl-10">
            <p>{{capturedImageTitle}}</p>
            <p hidden>size</p>
          </ion-label>
        </div>
        <button class="btn-no-color" (click)="clear()">
          <ion-icon name="close"></ion-icon>
        </button>
      </div>
    </div>


    <!-- Current -->
  <!--   <div *ngIf="!captureContent">
      <div class="ion-item-container-no-border mb-20"
        *ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
         <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label> 
        <div class="d-flex justify-content-between">
          <div class="d-flex">
            <ion-thumbnail slot="start">
              <ion-img [(ngModel)]="publication.FileBase64" name="image" ngDefaultControl
                [src]="publication.FileBase64"></ion-img>
            </ion-thumbnail>

            <ion-label class="pl-10">
              <p>{{publication.OriginalFileName}}.{{publication.FileExtension}}</p>
              <p hidden>size</p>
            </ion-label>
          </div>
          <button class="btn-no-color" (click)="deletePublicationImage()">
            <ion-icon name="close"></ion-icon>
          </button>
        </div>
      </div>
    </div> -->



    <div class="ion-item-container-no-border hide-desktop">
      <ion-label (click)="loadVideo()">
        <div class="attach-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
        </div>
        <div class="attach-document cursor-pointer">
          <ion-label>Tirar Fotografia</ion-label>
        </div>
      </ion-label>
    </div>

    <div class="ion-item-container-no-border">
      <ion-label (click)="loadVideo()" class="cursor-pointer">
        <div class="attach-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
        </div>
        <div class="attach-document cursor-pointer">
          <ion-label>Anexar Fotografia</ion-label>
        </div>
      </ion-label>
    </div>
  </div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar width-100 px-20">
    <ion-buttons slot="start">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>