52 lines
1.9 KiB
HTML
52 lines
1.9 KiB
HTML
@if(mediaSource) {
|
|
<div>
|
|
<audio width="1" height="1" src="{{mediaSource}}"
|
|
#mediaPlayer
|
|
preload
|
|
(play)="changeStateToPlay()"
|
|
(pause)="changeStateToPause()"
|
|
(timeupdate)="changeTimeupdate($event.currentTime)"
|
|
(durationchange)="changeDurationchange($event.duration)"
|
|
(loadedmetadata)="changeMetadata()"
|
|
autoplay
|
|
(ended)="onAudioEnded()"
|
|
>
|
|
</audio>
|
|
<div class="controls">
|
|
<div class="controls-inner">
|
|
<div class="title text-ellipsis">
|
|
<label class="unselectable">{{dataTitle}}</label>
|
|
</div>
|
|
<div class="text-ellipsis">
|
|
<label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
|
|
</div>
|
|
<div class="timer-slider">
|
|
<input type="range" min="0" class="slider"
|
|
[value]="currentTime"
|
|
[max]="duration"
|
|
(input)="seek($event.target)">
|
|
</div>
|
|
<div class="flex-row">
|
|
<label class="unselectable">{{currentTimeDisplay}}</label>
|
|
<label class="unselectable flex-row-last">{{durationDisplay}}</label>
|
|
</div>
|
|
<div class="control">
|
|
@if(!isPlaying) {
|
|
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
|
|
}
|
|
@else {
|
|
<button (click)="onPause()"><i class="material-icons">pause</i></button>
|
|
}
|
|
<button (click)="onStop()"><i class="material-icons">stop</i></button>
|
|
<div style="margin:auto"></div>
|
|
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
|
|
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
|
|
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
|
|
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
|
|
<div style="margin:auto"></div>
|
|
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} |