<div id="player-container">
  <div id="timeline"></div>
  <div id="waveform"></div>

  <div id="controls">
    <ng-template #playingTemplate [ngIf]="this.playing()">
      <mat-icon class="clickable" (click)="this.pause()">pause</mat-icon>
    </ng-template>

    <ng-template #pausedTemplate [ngIf]="!this.playing()">
      <mat-icon class="clickable" (click)="this.play()">play_arrow</mat-icon>
    </ng-template>

    <p id="duration">{{this.getPos() | durationshort}} / {{this.getDuration() | durationshort}}</p>

  </div>

  <div id="icons">
    <p>Not implemented:</p>
    <mat-icon class="clickable" (click)="this.replaySelectedRegion()">replay</mat-icon>
    <mat-icon class="clickable" (click)="this.replayLast(5)">replay_5</mat-icon>
    <mat-icon class="clickable" (click)="this.replayLast(10)">replay_10</mat-icon>
    <!-- Currently doesn't work. Wavesurfer bug?
    <mat-icon class="clickable" (click)="this.loopSelectedRegion()">loop</mat-icon>
    -->
    <mat-icon class="clickable">skip_previous</mat-icon>
    <mat-icon class="clickable">skip_next</mat-icon>
  </div>
</div>

<div id="player-container">
  <div id="timeline"></div>
  <div id="waveform"></div>

  <div id="controls">
    <ng-template #playingTemplate [ngIf]="this.playing()">
      <mat-icon class="clickable" (click)="this.pause()">pause</mat-icon>
    </ng-template>

    <ng-template #pausedTemplate [ngIf]="!this.playing()">
      <mat-icon class="clickable" (click)="this.play()">play_arrow</mat-icon>
    </ng-template>

    <p id="duration">{{this.getPos() | durationshort}} / {{this.getDuration() | durationshort}}</p>

  </div>

  <div id="icons" *ngIf="this.isReady()">
    <mat-icon class="clickable" (click)="this.replaySelectedRegion()">replay</mat-icon>
    <mat-icon class="clickable" (click)="this.replayLast(5)">replay_5</mat-icon>
    <mat-icon class="clickable" (click)="this.replayLast(10)">replay_10</mat-icon>
    <mat-icon class="clickable" (click)="this.loopSelectedRegion()">loop</mat-icon>
    <mat-icon class="clickable" (click)="this.selectPreviousRegion()">skip_previous</mat-icon>
    <mat-icon class="clickable" (click)="this.selectNextRegion()">skip_next</mat-icon>
    <mat-icon class="clickable" (click)="this.deleteRegion()">delete</mat-icon>
  </div>
</div>

Support trash icon, only draw icons when player ready
Support trash icon, only draw icons when player ready
