@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>
}