UIAngular/Client/src/app/components/audio-player/audio-player.component.html

28 lines
1.4 KiB
HTML

<div class="wrapper">
<div class="slider">
<span [ngSwitch]="audioState" >
<span *ngSwitchDefault><i ofbicon class="audio-control-button">slow_motion_video</i></span>
<span *ngSwitchCase="audioStates.Loading"><i ofbicon class="audio-control-button padding5">slow_motion_video</i></span>
<span *ngSwitchCase="audioStates.Paused"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span>
<span *ngSwitchCase="audioStates.Playing"><i ofbicon (click)="pause()" class="audio-control-button padding5">pause</i></span>
<span *ngSwitchCase="audioStates.Error"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span>
</span>
<md-slider class="slider-control padding5" min="0" [max]="audioDuration" [value]="currentTime" (change)="changeTime($event)"></md-slider>
<span class="duration padding5">{{ currentTime | duration:audioDuration }}</span>
<span><i ofbicon class="audio-control-button padding5" (click)="close()">close</i></span>
</div>
<div [ngSwitch]="audioState" class="text">
<div *ngSwitchCase="audioStates.Loading">
Loading...
</div>
<div *ngSwitchCase="audioStates.Paused">
{{ audioFileTitle }}
</div>
<div *ngSwitchCase="audioStates.Playing">
{{ audioFileTitle }}
</div>
<div *ngSwitchCase="audioStates.Error">
Error Playing... {{ errorMessage }}
</div>
</div>
</div>