Added a seekable progress bar to the media player

docroot/css/lms.css

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

@@ -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() {