audio-recorder.component.html 2.02 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2
<div class="d-flex">
  <div class="p-btn-record d-flex">
3 4 5 6 7 8
    <div
      class="btn-clear"
      (click)="onBtnClearAudio()"
      *ngIf="withRmBtn && (audioUrl || audioBlob)"
    >
      <fa name="close"></fa>
liujiangnan's avatar
liujiangnan committed
9
    </div>
10 11 12 13 14 15 16
    <div
      class="btn-record"
      *ngIf="type === Type.RECORD && !isUploading"
      [class.p-recording]="isRecording"
      (click)="onBtnRecord()"
    >
      <i nz-icon nzType="audio" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
17 18 19
      Record Audio
    </div>
    <nz-upload
20 21 22 23 24 25 26 27 28 29 30 31
      [nzAccept]="'.mp3'"
      [nzShowUploadList]="false"
      [nzAction]="uploadUrl"
      [nzData]="uploadData"
      (nzChange)="handleChange($event)"
    >
      <div
        class="btn-upload ng-star-inserted"
        [ngClass]="{ 'has-clear': withRmBtn && (audioUrl || audioBlob) }"
        *ngIf="type === Type.UPLOAD && !isUploading"
      >
        <i nz-icon nzType="cloud-upload" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
32 33 34 35
        Upload Audio
      </div>
    </nz-upload>
    <div class="p-upload-progress-bg" *ngIf="isUploading">
36
      <div class="i-bg" [style.width]="progress + '%'"></div>
liujiangnan's avatar
liujiangnan committed
37
      <div class="i-text">
38
        <i nz-icon nzType="loading" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
39 40 41 42
        Uploading...
      </div>
    </div>

43 44 45
    <div
      *ngIf="audioUrl && needRemove; then truthyTemplate; else falsyTemplate"
    ></div>
liujiangnan's avatar
liujiangnan committed
46

47
    <ng-template #truthyTemplate>
liujiangnan's avatar
liujiangnan committed
48
      <div class="btn-delete" (click)="onBtnDeleteAudio()">
49
        <i nz-icon nzType="close" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
50 51 52 53 54
      </div>
    </ng-template>

    <ng-template #falsyTemplate>
      <div class="btn-switch" (click)="onBtnSwitchType()">
55
        <i nz-icon nzType="setting" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
56 57 58 59
      </div>
    </ng-template>
  </div>

60 61 62 63 64 65 66 67 68 69 70 71 72
  <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' : ''">
      <i nz-icon nzType="caret-right" nzTheme="outline"></i>
liujiangnan's avatar
liujiangnan committed
73 74 75
    </div>
  </div>
</div>