control-bar.component.html

<div *ngIf="elementModel.startControl ||
    elementModel.pauseControl ||
    elementModel.showRestRuns ||
    elementModel.progressBar ||
    elementModel.showRestTime ||
    elementModel.muteControl ||
    elementModel.volumeControl"
    class="control-bar"
    [class.hint-border]="showHint">
  <ng-container *ngIf="elementModel.startControl">
    <button *ngIf="!playing || !elementModel.pauseControl"
            type="button"
            mat-button
            class="control-button"
            [class.enabled-control]="!disabled && active && dependencyDissolved"
            [class.active-control]="playing"
            [disabled]="disabled || !active || !dependencyDissolved"
            (click)="play()">
      <mat-icon>play_arrow</mat-icon>
    </button>
  </ng-container>
  <ng-container *ngIf="elementModel.pauseControl">
    <button *ngIf="playing"
            type="button"
            mat-button
            class="control-button"
            [class.enabled-control]="!disabled && active && dependencyDissolved"
            [class.active-control]="pausing"
            [disabled]="disabled || !active || !dependencyDissolved"
            (click)="pause()">
      <mat-icon>pause</mat-icon>
    </button>
  </ng-container>
  <ng-container *ngIf="elementModel.maxRuns && elementModel.showRestRuns">
    <div class="runs mat-typography">
      {{ runCounter + 1 }} / {{ elementModel.maxRuns }}
    </div>
  </ng-container>
  <ng-container *ngIf="elementModel.progressBar">
    <mat-slider class="duration"
                min="0"
                step="1"
                [max]="player.duration"
                [value]="player.currentTime"
                [disabled]="disabled || !elementModel.interactiveProgressbar || !active || !dependencyDissolved"
                (input)="onTimeChange($event)">
    </mat-slider>
  </ng-container>
  <ng-container *ngIf="elementModel.showRestTime">
    <div *ngIf="!restTimeMode"
         class="time mat-typography"
         (click)="toggleTime()">
      {{currentTime | playerTimeFormat}} / {{duration | playerTimeFormat }}
    </div>
    <div *ngIf="restTimeMode"
         class="time mat-typography"
         (click)="toggleTime()">
      -{{currentRestTime | playerTimeFormat}}
    </div>
  </ng-container>
  <ng-container *ngIf="elementModel.muteControl">
    <button mat-button
            type="button"
            class="control-button enabled-control"
            (click)="toggleVolume()">
      <mat-icon *ngIf="!player.muted">volume_up</mat-icon>
      <mat-icon *ngIf="player.muted">volume_off</mat-icon>
    </button>
  </ng-container>
  <ng-container *ngIf="elementModel.volumeControl">
    <mat-slider class="volume"
                min="0"
                step="0.01"
                max="1"
                [value]="player.volume"
                (input)="onVolumeChange($event)">
    </mat-slider>
  </ng-container>
</div>
<div *ngIf="showHint || project === 'editor'"
     class="status-bar mat-typography">
  {{elementModel.hintLabel}}
</div>