Added a seekable progress bar to the media player

approot/mediaplayer.xml

@@ -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 class="Lms-player-seek-container">
-		<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%">
+			<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
-			<span class="sr-only">20% Complete</span>
+			<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="row">
-		<div class="col-xs-4 Lms-player-controls">
+			<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-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-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-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>
+				<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>
-			<div class="Lms-player-text">
+			<div class="col-xs-8">
-				<small><span class="hidden-xs">${release}</span><i>${artist}</i></small>
+				<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

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