From dc6b134af66b04d6a31614c05ea4fdf57d207165 Mon Sep 17 00:00:00 2001
From: emeric <itmfr@yahoo.fr>
Date: Wed, 5 Sep 2018 21:19:51 +0200
Subject: [PATCH] Better styling media player

---
 approot/mediaplayer.xml | 49 +++++++++++++++--------------------------
 docroot/css/lms.css     | 13 ++++++++++-
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml
index d6a0d1c0..7e6d01c7 100644
--- a/approot/mediaplayer.xml
+++ b/approot/mediaplayer.xml
@@ -5,42 +5,29 @@
 <message id="Lms.MediaPlayer.template">
 	<audio id="lms-mp-audio"></audio>
 	<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 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 class="row">
+		<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-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">
+			<div class="Lms-player-text">
+				${title}
+			</div>
+			<div class="Lms-player-text">
+				<small><span class="hidden-xs">${release}</span><i>${artist}</i></small>
 			</div>
 		</div>
 	</div>
+	</div>
 
 </message>
 
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index 5a186a35..923a3042 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -246,7 +246,7 @@ a:hover {
 .Lms-player-seek {
 	cursor: pointer;
 	z-index: 1;
-#	touch-action: manipulation;
+	touch-action: manipulation;
 }
 
 .Lms-player-progress {
@@ -257,3 +257,14 @@ a:hover {
 	margin-bottom: 8px;
 }
 
+.Lms-player-controls {
+	text-align: center;
+	white-space: nowrap;
+}
+
+.Lms-player-text {
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}