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>
docroot/css/lms.css
+39 -5
View File
@@ -243,18 +243,47 @@ a:hover {
margin-right: 8px;
}
.Lms-player-seek-container {
margin-top: 8px;
margin-bottom: 8px;
position: relative;
width: 100%;
height: 8px;
}
.Lms-player-seek-common {
position: absolute;
width:100%;
top: 0px;
left: 0px;
height: 8px;
}
.Lms-player-seek {
cursor: pointer;
z-index: 1;
touch-action: manipulation;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
height: 0px;
width: 0px;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
height: 0px;
width: 0px;
}
.Lms-player-progress {
width: 100%;
background-color: darkgrey;
height: 12px;
margin-top: 8px;
margin-bottom: 8px;
}
.Lms-player-controls {
@@ -262,9 +291,14 @@ a:hover {
white-space: nowrap;
}
.Lms-player-text {
.Lms-player-text-center {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Lms-player-text {
margin-left:8px;
margin-right:8px;
}
docroot/js/mediaplayer.js
+29 -2
View File
@@ -8,6 +8,7 @@ LMS.mediaplayer = function () {
var _elems = {};
var _offset = 0;
var _duration = 0;
var _audioSrc;
var _updateControls = function() {
_elems.progress.classList.toggle("active");
@@ -38,6 +39,19 @@ LMS.mediaplayer = function () {
return res;
}
var _playTrack = function() {
var playPromise = _elems.audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started
})
.catch(error => {
// Auto-play was prevented
});
}
}
var init = function(root) {
_root = root;
@@ -47,6 +61,7 @@ LMS.mediaplayer = function () {
_elems.previous = document.getElementById("lms-mp-previous");
_elems.next = document.getElementById("lms-mp-next");
_elems.progress = document.getElementById("lms-mp-progress");
_elems.seek = document.getElementById("lms-mp-seek");
_elems.play.addEventListener("click", function() {
_elems.audio.play();
@@ -61,6 +76,16 @@ LMS.mediaplayer = function () {
_elems.next.addEventListener("click", function() {
Wt.emit(_root, "playNext");
});
_elems.seek.addEventListener("change", function() {
if (_elems.audio.src == undefined)
return;
_offset = parseInt(_elems.seek.value, 10);
_elems.audio.src = _audioSrc + "&offset=" + _offset;
_elems.audio.load();
_playTrack();
});
_elems.audio.addEventListener("play", _updateControls);
_elems.audio.addEventListener("playing", _updateControls);
@@ -80,11 +105,13 @@ LMS.mediaplayer = function () {
_offset = 0;
_duration = params.duration;
_audioSrc = params.resource;
_elems.audio.src = params.resource;
_elems.seek.max = _duration;
_elems.audio.src = _audioSrc;
if (autoplay)
_elems.audio.play();
_playTrack();
}
var stop = function() {