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

Added duration in the audio player. Fixes #15

Browse Source
This commit is contained in:
emeric
2020-01-14 13:57:14 +01:00
parent 0ee1a32bc2
commit e4e294aa92
4 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/mediaplayer.xml
+8 -1
View File
@@ -14,12 +14,19 @@
</div>
<div class="row">
<div class="col-xs-4 Lms-player-controls">
<div class="col-xs-4">
<div class="row">
<div class="col-sm-6 col-xs-12 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="hidden-xs col-sm-6 Lms-player-duration">
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
</div>
</div>
</div>
<div class="col-xs-8">
<div class="Lms-player-text-center">
${title class="Lms-player-text"}
approot/release.xml
+1 -1
View File
@@ -8,7 +8,7 @@
<message id="Lms.Explore.Release.template">
<div class="row">
<div class="col-md-12">
<div class="col-xs-12">
${cover class="Lms-explore-release-cover"}
</div>
</div>
docroot/css/lms.css
+9 -2
View File
@@ -402,7 +402,7 @@ a:hover {
}
.Lms-player-btn {
font-size: 34px !important;
font-size: 40px !important;
cursor: pointer;
}
@@ -411,11 +411,18 @@ a:hover {
}
.Lms-player-btn-playpause {
width: 32px;
width: 40px;
margin-left: 8px;
margin-right: 8px;
}
.Lms-player-duration {
line-height: 40px;
text-align: center;
color: darkgrey;
white-space: nowrap;
}
.Lms-player-seek-container {
margin-top: 8px;
margin-bottom: 8px;
docroot/js/mediaplayer.js
+9 -7
View File
@@ -23,17 +23,13 @@ LMS.mediaplayer = function () {
}
}
var _durationToString = function (duration, displayHours) {
var hours = parseInt(duration / 3600, 10) % 24;
var minutes = parseInt(duration / 60, 10) % 60;
var _durationToString = function (duration) {
var minutes = parseInt(duration / 60, 10);
var seconds = parseInt(duration, 10) % 60;
var res = "";
if (displayHours)
res += (hours < 10 ? "0" + hours : hours) + ":";
res += (minutes < 10 ? "0" + minutes : minutes) + ":";
res += minutes + ":";
res += (seconds < 10 ? "0" + seconds : seconds);
return res;
@@ -62,6 +58,8 @@ LMS.mediaplayer = function () {
_elems.next = document.getElementById("lms-mp-next");
_elems.progress = document.getElementById("lms-mp-progress");
_elems.seek = document.getElementById("lms-mp-seek");
_elems.curtime = document.getElementById("lms-mp-curtime");
_elems.duration = document.getElementById("lms-mp-duration");
_elems.play.addEventListener("click", function() {
if (_elems.audio.hasAttribute("src"))
@@ -94,6 +92,7 @@ LMS.mediaplayer = function () {
_elems.audio.addEventListener("timeupdate", function() {
_elems.progress.style.width = "" + ((_offset + _elems.audio.currentTime) / _duration) * 100 + "%";
_elems.curtime.innerHTML = _durationToString(_offset + _elems.audio.currentTime);
});
_elems.audio.addEventListener("ended", function() {
@@ -111,6 +110,9 @@ LMS.mediaplayer = function () {
_elems.seek.max = _duration;
_elems.audio.src = _audioSrc;
_elems.curtime.innerHTML = _durationToString(_offset);
_elems.duration.innerHTML = _durationToString(_duration);
if (autoplay)
_playTrack();
}