mediaplayer.xml

<?xml version="1.0" encoding="UTF-8" ?>
<messages xmlns:if="Wt.WTemplate.conditions">
<!--FORMS message blocks-->

<message id="Lms.MediaPlayer.template">
	<audio id="lms-mp-audio">
	</audio>
	<div class="container">
		<div class="p-1 my-1 position-relative">
			<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
			<div class="progress Lms-player-seek-common bg-secondary rounded">
				<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
			</div>
		</div>

		<div class="d-flex align-items-center">
			<div class="py-2 pe-2 d-inline-flex">
				<button id="lms-mp-previous" class="btn btn-sm btn-outline-primary border-0">
					<i class="fa fa-fw fa-step-backward"/>
				</button>
				<button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
					<i class="fa fa-fw fa-play"/>
				</button>
				<button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0">
					<i class="fa fa-fw fa-step-forward"/>
				</button>
			</div>
			<div class="flex-fill text-center text-truncate">
				${title class="d-block text-truncate"}
				${artist class="d-inline text-decoration-none text-truncate link-success"}
				<span class="d-none d-md-inline">
					${separator}
					${release class="text-decoration-none text-truncate link-success"}
				</span>
			</div>
			<div class="p-2 d-none d-sm-block text-muted text-nowrap">
				<span id="lms-transcoding-active" title="${tr:Lms.Player.transcoding-active}" class="p-2" style="display:none"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
			</div>
			<div class="p-2 d-none d-md-flex align-items-center Lms-player-volume-container">
				<i id="lms-mp-volume" class="fa fa-fw fa-volume-up link-primary me-1"></i>
				<input id ="lms-mp-volume-slider" class="form-range" type="range" min="0" max="1" step="0.01" value="0.8"/>
			</div>
			<div class="py-2 ps-2">
				${playqueue-btn class="btn btn-outline-primary border-0"}
			</div>
		</div>
	</div>
</message>

<message id="Lms.MediaPlayer.template.playqueue-btn">
	<span>
		<i class="fa fa-fw fa-th-list d-inline"/><div class="d-none d-sm-inline ms-2 small">{1}</div>
	</span>
</message>

</messages>