owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a seekable progress bar to the media player

Browse Source
This commit is contained in:
emeric
2018-09-09 19:17:24 +02:00
parent 207faf1cbf
commit 5d01878aed
3 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/mediaplayer.xml
+19 -17
View File
@@ -5,29 +5,31 @@
<message id="Lms.MediaPlayer.template">
<audio id="lms-mp-audio"></audio>
<div class="container">
<div class="progress Lms-player-progress">
<div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">20% Complete</span>
<div class="Lms-player-seek-container">
<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 Lms-player-progress">
<div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 Lms-player-controls">
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
</div>
<div class="col-xs-8">
<div class="Lms-player-text">
${title}
<div class="row">
<div class="col-xs-4 Lms-player-controls">
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
</div>
<div class="Lms-player-text">
<small><span class="hidden-xs">${release}</span><i>${artist}</i></small>
<div class="col-xs-8">
<div class="Lms-player-text-center">
${title class="Lms-player-text"}
</div>
<div class="Lms-player-text-center">
<small><span class="hidden-xs">${release class="Lms-player-text"}</span><i>${artist class="Lms-player-text"}</i></small>
</div>
</div>
</div>
</div>
</div>
</message>