audio-recorder.component.html 1.85 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2
<div class="d-flex">
  <div class="p-btn-record d-flex">
3 4
    <div class="btn-clear" style="cursor: pointer" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)">
      <fa-icon icon="times"></fa-icon>
liujiangnan's avatar
liujiangnan committed
5 6 7 8
    </div>
    <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading"
         [class.p-recording]="isRecording"
         (click)="onBtnRecord()">
liujiaxin's avatar
liujiaxin committed
9
      <fa-icon icon="microphone"></fa-icon>
liujiangnan's avatar
liujiangnan committed
10 11 12 13
      Record Audio
    </div>
    <nz-upload
        [nzAccept] = "'.mp3'"
liujiaxin's avatar
liujiaxin committed
14
        [nzShowUploadList]="false"
liujiangnan's avatar
liujiangnan committed
15 16 17
        [nzAction]="uploadUrl"
        [nzData]="uploadData"
        (nzChange)="handleChange($event)">
liujiangnan's avatar
liujiangnan committed
18 19

      <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading">
liujiaxin's avatar
liujiaxin committed
20
        <fa-icon icon="upload"></fa-icon>
liujiangnan's avatar
liujiangnan committed
21 22 23 24 25 26
        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">
liujiaxin's avatar
liujiaxin committed
27
        <fa-icon icon="cloud-upload-alt"></fa-icon>
liujiangnan's avatar
liujiangnan committed
28 29 30 31 32 33 34 35 36 37
        Uploading...
      </div>
    </div>


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

    <ng-template #truthyTemplate >

      <div class="btn-delete" (click)="onBtnDeleteAudio()">
liujiaxin's avatar
liujiaxin committed
38
        <fa-icon icon="close"></fa-icon>
liujiangnan's avatar
liujiangnan committed
39 40 41 42 43 44
      </div>

    </ng-template>

    <ng-template #falsyTemplate>
      <div class="btn-switch" (click)="onBtnSwitchType()">
liujiaxin's avatar
liujiaxin committed
45
        <fa-icon icon="cog"></fa-icon>
liujiangnan's avatar
liujiangnan committed
46 47 48 49 50 51 52 53 54 55 56 57
      </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':''">
liujiaxin's avatar
liujiaxin committed
58
      <fa-icon [icon]="playIcon"></fa-icon>
liujiangnan's avatar
liujiangnan committed
59 60 61
    </div>
  </div>
</div>