[UI] Better looking

approot/templates.xml

@@ -531,16 +531,19 @@
 <message id="wa-audio-player">
 	${audio}
 	${prev}${play-pause}${next}
+	<div class="mediaplayer-volume-container visible-lg">
+		${volume}
+	</div>
 	<div class="mediaplayer-cover hidden-xs">
 		${cover}
 	</div>
 	<div class="mediaplayer-info-container">
-		<span class="mediaplayer-track">${track}</span>   <span class="mediaplayer-artist">${artist}</span> <br/>
-		${seekbar}
-	</div>
-	${curtime}${duration}
-	<div class="mediaplayer-volume-container visible-lg">
-		${volume}
+		<div class="mediaplayer-track-info">
+			<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span>
+		</div>
+		<div class="mediaplayer-progress-container">
+			${curtime}${seekbar}${duration}
+		</div>
 	</div>
 	${shuffle}${repeat}${playlist}
 </message>

docroot/css/lms.css

@@ -87,11 +87,34 @@
 }
 
 .mediaplayer-info-container {
+	width: 100%;
+	min-width: 100px;
+	margin: 8px;
+}
+
+.mediaplayer-track-info {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	width: 100%;
-	margin: 8px;
+}
+
+.mediaplayer-progress-container {
+	display: flex;
+	align-items: center;
+}
+
+.mediaplayer-badge {
+	min-width: initial;
+}
+
+.mediaplayer-current-duration {
+	margin-right: 8px;
+}
+.mediaplayer-total-duration {
+	margin-left: 8px;
+}
+
+.mediaplayer-seekbar {
 }
 
 .mediaplayer-volume-container {

src/ui/audio/AudioPlayer.cpp

@@ -108,6 +108,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	_cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64));
 
 	InputRange *seekbar = new InputRange();
+	seekbar->addStyleClass("mediaplayer-seekbar");
 	bindWidget("seekbar", seekbar);
 
 	bindString("track", "Track");
@@ -177,11 +178,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	bindWidget("play-pause", playPauseBtn);
 
 	Wt::WText *trackCurrentTime = new Wt::WText("00:00");
-	trackCurrentTime->addStyleClass("hidden-xs");
+	trackCurrentTime->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-current-duration");
 	bindWidget("curtime", trackCurrentTime);
 
 	_trackDuration = new Wt::WText("00:00");
-	_trackDuration->addStyleClass("hidden-xs");
+	_trackDuration->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-total-duration");
 	bindWidget("duration", _trackDuration);
 
 	this->doJavaScript(