Adding duration/total time in player

docroot/js/mediaplayer.js

@@ -6,6 +6,8 @@ LMS.mediaplayer = function () {
 
 	var _root = {};
 	var _elems = {};
+	var _offset = 0;
+	var _duration = 0;
 
 	var _updateControls = function() {
 		if (_elems.audio.paused) {
@@ -18,6 +20,22 @@ LMS.mediaplayer = function () {
 		}
 	}
 
+	var _durationToString = function (duration, displayHours) {
+			var hours = parseInt(duration / 3600, 10) % 24;
+			var minutes = parseInt(duration / 60, 10) % 60;
+			var seconds = parseInt(duration, 10) % 60;
+
+			var res = "";
+
+			if (displayHours)
+				res += (hours < 10 ? "0" + hours : hours) + ":";
+
+			res += (minutes < 10 ? "0" + minutes : minutes) + ":";
+			res += (seconds  < 10 ? "0" + seconds : seconds);
+
+			return res;
+	}
+
 	var init = function(root) {
 		_root = root;
 
@@ -30,6 +48,7 @@ LMS.mediaplayer = function () {
 		_elems.artist = document.getElementById("lms-mp-artist");
 		_elems.release = document.getElementById("lms-mp-release");
 		_elems.duration = document.getElementById("lms-mp-duration");
+		_elems.time = document.getElementById("lms-mp-time");
 
 		_elems.play.addEventListener("click", function() {
 			_elems.audio.play();
@@ -49,6 +68,10 @@ LMS.mediaplayer = function () {
 		_elems.audio.addEventListener("playing", _updateControls);
 		_elems.audio.addEventListener("pause", _updateControls);
 
+		_elems.audio.addEventListener("timeupdate", function() {
+			_elems.time.innerHTML = _durationToString(_offset + _elems.audio.currentTime, _duration > 3600)
+		});
+
 		_elems.audio.addEventListener("ended", function() {
 			Wt.emit(_root, "playbackEnded");
 		});
@@ -57,11 +80,15 @@ LMS.mediaplayer = function () {
 	var loadTrack = function(params, autoplay) {
 		console.log("Loading track '" + params.name + "', release = '" + params.release + "', artist = '" + params.artist + "', resource = '" + params.resource + "', imgResource = '" + params.imgResource);
 
+		_offset = 0;
+		_duration = params.duration;
+
 		_elems.title.innerHTML = params.name;
 		_elems.artist.innerHTML = params.artist;
 		_elems.release.innerHTML = params.release;
 		_elems.audio.src = params.resource;
-		_elems.duration.innerHTML = params.duration;
+		_elems.duration.innerHTML = _durationToString(_duration, _duration > 3600);
+		_elems.time.innerHTML = _durationToString(0, _duration > 3600)
 
 		if (autoplay)
 			_elems.audio.play();