Added duration in the audio player. Fixes #15

approot/mediaplayer.xml

@@ -14,11 +14,18 @@
 		</div>
 
 		<div class="row">
-			<div class="col-xs-4 Lms-player-controls">
+			<div class="col-xs-4">
-				<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
+				<div class="row">
-				<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
+					<div class="col-sm-6 col-xs-12 Lms-player-controls">
-				<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
+						<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
-				<i id="lms-mp-next" class="fa fa-step-forward 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">

approot/release.xml

@@ -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

@@ -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

@@ -23,17 +23,13 @@ LMS.mediaplayer = function () {
 		}
 	}
 
-	var _durationToString = function (duration, displayHours) {
+	var _durationToString = function (duration) {
-			var hours = parseInt(duration / 3600, 10) % 24;
+			var minutes = parseInt(duration / 60, 10);
-			var minutes = parseInt(duration / 60, 10) % 60;
 			var seconds = parseInt(duration, 10) % 60;
 
 			var res = "";
 
-			if (displayHours)
+			res += minutes + ":";
-				res += (hours < 10 ? "0" + hours : hours) + ":";
-
-			res += (minutes < 10 ? "0" + minutes : 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();
 	}