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