Styling media player

approot/mediaplayer.xml

@@ -4,14 +4,44 @@
 
 <message id="Lms.MediaPlayer.template">
 	<audio id="lms-mp-audio"></audio>
-	<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"></i>
-	<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn" style="display: none"></i>
-	<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
-	${title}${artist}${release}
-	<span id="lms-mp-time">00:00</span>
-	<span id="lms-mp-duration">00:00</span>
-	<img id="lms-mp-cover"/>
+	<div class="container">
+		<div class="progress 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%">
+			      <span class="sr-only">20% Complete</span>
+		        </div>
+		</div>
+
+		<div class="container-fluid">
+			<div class="row">
+				<div class="col-xs-4 Lms-horizontal-center">
+					<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="col-xs-8 Lms-horizontal-center">
+					<div class="container-fluid">
+						<div class="row">
+							<div class="col-xs-12 Lms-horizontal-center">
+								${title}
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-xs-12 Lms-horizontal-center">
+								<small>
+									<span class="hidden-xs">
+										${release}
+									</span>
+									<i>${artist}</i>
+								</small>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
 </message>
 
 </messages>

approot/templates.xml

@@ -6,7 +6,7 @@
 	<div class="container">
 		${contents class="Lms-contents"}
 	</div>
-	${player class="Lms-player Lms-vertical-align"}
+	${player class="Lms-player"}
 </message>
 
 </messages>

docroot/css/lms.css

@@ -1,7 +1,3 @@
-body {
-	margin-bottom: 16px;
-}
-
 a, a:link, a:active, a:visited {
 	color: black;
 	text-decoration: none;
@@ -79,7 +75,7 @@ a:hover {
 }
 
 .Lms-contents {
-	margin-bottom: 50px;
+	margin-bottom: 78px;
 }
 
 .Lms-explore-filters {
@@ -227,13 +223,13 @@ a:hover {
 	position: fixed;
 	bottom: 0;
 	width: 100%;
-	height: 50px;
+	height: 70px;
 	background-color: #f5f5f5;
+	box-shadow: 0px -2px 8px #f5f5f5;
 }
 
 .Lms-player-btn {
 	font-size: 34px !important;
-	margin: 8px;
 	cursor: pointer;
 }
 
@@ -241,4 +237,23 @@ a:hover {
 	color: #337ab7;
 }
 
+.Lms-player-btn-playpause {
+	width: 32px;
+	margin-left: 8px;
+	margin-right: 8px;
+}
+
+.Lms-player-seek {
+	cursor: pointer;
+	z-index: 1;
+#	touch-action: manipulation;
+}
+
+.Lms-player-progress {
+	width: 100%;
+	background-color: darkgrey;
+	height: 12px;
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
 

docroot/js/mediaplayer.js

@@ -10,6 +10,7 @@ LMS.mediaplayer = function () {
 	var _duration = 0;
 
 	var _updateControls = function() {
+		_elems.progress.classList.toggle("active");
 		if (_elems.audio.paused) {
 			_elems.play.style.display = "inline";
 			_elems.pause.style.display = "none";
@@ -17,6 +18,7 @@ LMS.mediaplayer = function () {
 		else {
 			_elems.pause.style.display = "inline";
 			_elems.play.style.display = "none";
+			_elems.progress.classList.add("active");
 		}
 	}
 
@@ -44,9 +46,7 @@ LMS.mediaplayer = function () {
 		_elems.pause = document.getElementById("lms-mp-pause");
 		_elems.previous = document.getElementById("lms-mp-previous");
 		_elems.next = document.getElementById("lms-mp-next");
-		_elems.duration = document.getElementById("lms-mp-duration");
-		_elems.time = document.getElementById("lms-mp-time");
-		_elems.cover = document.getElementById("lms-mp-cover");
+		_elems.progress = document.getElementById("lms-mp-progress");
 
 		_elems.play.addEventListener("click", function() {
 			_elems.audio.play();
@@ -67,7 +67,7 @@ LMS.mediaplayer = function () {
 		_elems.audio.addEventListener("pause", _updateControls);
 
 		_elems.audio.addEventListener("timeupdate", function() {
-			_elems.time.innerHTML = _durationToString(_offset + _elems.audio.currentTime, _duration > 3600)
+			_elems.progress.style.width = "" + ((_offset + _elems.audio.currentTime) / _duration) * 100 + "%";
 		});
 
 		_elems.audio.addEventListener("ended", function() {
@@ -82,9 +82,6 @@ LMS.mediaplayer = function () {
 		_duration = params.duration;
 
 		_elems.audio.src = params.resource;
-		_elems.duration.innerHTML = _durationToString(_duration, _duration > 3600);
-		_elems.time.innerHTML = _durationToString(0, _duration > 3600)
-		_elems.cover.src = params.imgResource;
 
 		if (autoplay)
 			_elems.audio.play();