audio-recorder.component.html 1.85 KB
<div class="d-flex">
  <div class="p-btn-record d-flex">
    <div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
      <fa-icon icon="times"></fa-icon>
    </div>
    <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading"
         [class.p-recording]="isRecording"
         (click)="onBtnRecord()">
      <fa-icon icon="microphone"></fa-icon>
      Record Audio
    </div>
    <nz-upload
        [nzAccept] = "'.mp3'"
        [nzShowUploadList]="false"
        [nzAction]="uploadUrl"
        [nzData]="uploadData"
        (nzChange)="handleChange($event)">

      <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading">
        <fa-icon icon="upload"></fa-icon>
        Upload Audio
      </div>
    </nz-upload>
    <div class="p-upload-progress-bg" *ngIf="isUploading">
      <div class="i-bg" [style.width]="progress+'%'"></div>
      <div class="i-text">
        <fa-icon icon="cloud-upload-alt"></fa-icon>
        Uploading...
      </div>
    </div>


    <div *ngIf="audioUrl && needRemove; then truthyTemplate else falsyTemplate"></div>

    <ng-template #truthyTemplate >

      <div class="btn-delete" (click)="onBtnDeleteAudio()">
        <fa-icon icon="close"></fa-icon>
      </div>

    </ng-template>

    <ng-template #falsyTemplate>
      <div class="btn-switch" (click)="onBtnSwitchType()">
        <fa-icon icon="cog"></fa-icon>
      </div>
    </ng-template>




  </div>

  <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
    <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
                 nzType="circle"></nz-progress>
    <div class="p-btn-play" [style.left]="isPlaying?'8px':''">
      <fa-icon [icon]="playIcon"></fa-icon>
    </div>
  </div>
</div>