audio-recorder.component.html 1.78 KB
<div class="d-flex">
  <div class="p-btn-record d-flex">
    <div class="btn-clear" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
      <fa name="close"></fa>
    </div>
    <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading"
         [class.p-recording]="isRecording"
         (click)="onBtnRecord()">
      <fa name="microphone"></fa>
      Record Audio
    </div>
    <nz-upload
        [nzAccept] = "'.mp3'"
        [nzShowUploadList]="false"
        [nzBeforeUpload]="beforeUpload">
      <!--nzAction="/user/resource"-->

      <!--(nzChange)="handleChange($event)"-->

      <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading">
        <fa name="upload"></fa>
        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 name="cloud-upload"></fa>
        Uploading...
      </div>
    </div>


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

    <ng-template #truthyTemplate >

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

    </ng-template>

    <ng-template #falsyTemplate>
      <div class="btn-switch" (click)="onBtnSwitchType()">
        <fa name="cog"></fa>
      </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 [name]="playIcon"></fa>
    </div>
  </div>
</div>