60 lines
2.6 KiB
XML
60 lines
2.6 KiB
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" role="region" aria-label="${tr:Lms.Player.now-playing}">
|
|
<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" aria-label="${tr:Lms.Player.seek}"/>
|
|
<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" aria-label="${tr:Lms.Player.previous}">
|
|
<i class="fa fa-fw fa-step-backward"/>
|
|
</button>
|
|
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0" aria-label="${tr:Lms.Player.play-pause}">
|
|
<i class="fa fa-fw fa-play"/>
|
|
</button>
|
|
<button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0" aria-label="${tr:Lms.Player.next}">
|
|
<i class="fa fa-fw fa-step-forward"/>
|
|
</button>
|
|
</div>
|
|
<div class="flex-fill text-center text-truncate">
|
|
${title class="d-block text-truncate"}
|
|
<span>
|
|
${artist class="d-inline text-decoration-none text-truncate"}
|
|
<span class="d-none d-md-inline">
|
|
${separator}
|
|
${release class="text-decoration-none text-truncate link-success"}
|
|
</span>
|
|
</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" aria-label="${tr:Lms.Player.volume}"/>
|
|
</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>
|