[UI] Better looking

approot/templates.xml

@@ -529,11 +529,20 @@
 </message>
 
 <message id="wa-audio-player">
-	${audio}${prev}${play-pause}${next}
-	<div class="mediaplayer-cover">
+	${audio}
+	${prev}${play-pause}${next}
+	<div class="mediaplayer-cover hidden-xs">
 		${cover}
 	</div>
-	${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
+	<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>
+	${shuffle}${repeat}${playlist}
 </message>
 
 </messages>

docroot/css/lms.css

@@ -86,6 +86,26 @@
 	color: #428bca;
 }
 
+.mediaplayer-info-container {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	width: 100%;
+	margin: 8px;
+}
+
+.mediaplayer-volume-container {
+	width: 24px;
+	height: 64px;
+	margin: 8px;
+}
+
+.mediaplayer-volume {
+	height: 64px;
+	-webkit-appearance: slider-vertical;
+	writing-mode: bt-lr;
+}
+
 .mobile-search-title {
 	font-weight: bold;
 	height: 32px;

src/ui/audio/AudioPlayer.cpp

@@ -45,9 +45,8 @@ AudioPlayer::loadTrack(Database::Track::id_type trackId)
 		return false;
 	}
 
-	_trackName->setText(Wt::WString::fromUTF8(track->getName()));
-	_artistName->setText( Wt::WString::fromUTF8(track->getArtist()->getName()));
-	_releaseName->setText( Wt::WString::fromUTF8(track->getRelease()->getName()));
+	bindString("track", Wt::WString::fromUTF8(track->getName()));
+	bindString("artist", Wt::WString::fromUTF8(track->getArtist()->getName()));
 	_cover->setImageLink(SessionCoverResource()->getTrackUrl(trackId, 64));
 	_trackDuration->setText( boost::posix_time::to_simple_string( track->getDuration() ));
 
@@ -111,16 +110,12 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	InputRange *seekbar = new InputRange();
 	bindWidget("seekbar", seekbar);
 
-	_trackName = new Wt::WText();
-	bindWidget("track", _trackName);
-
-	_artistName = new Wt::WText();
-	bindWidget("artist", _artistName);
-
-	_releaseName = new Wt::WText();
-	bindWidget("release", _releaseName);
+	bindString("track", "Track");
+	bindString("artist", "Artist");
 
 	InputRange *volumeSlider = new InputRange();
+	volumeSlider->addStyleClass("mediaplayer-volume");
+	volumeSlider->setAttributeValue("orient", "vertical"); // firefox
 	bindWidget("volume", volumeSlider);
 
 	Wt::WText *playlistBtn = new Wt::WText("<i class=\"fa fa-list fa-2x\"></i>", Wt::XHTMLText);
@@ -162,7 +157,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	}));
 
 	Wt::WText *prevBtn = new Wt::WText("<i class=\"fa fa-step-backward fa-2x\"></i>", Wt::XHTMLText);
-	prevBtn->addStyleClass("mediaplayer-btn");
+	prevBtn->addStyleClass("mediaplayer-btn hidden-xs");
 	bindWidget("prev", prevBtn);
 	prevBtn->clicked().connect(std::bind([=] ()
 	{
@@ -182,9 +177,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	bindWidget("play-pause", playPauseBtn);
 
 	Wt::WText *trackCurrentTime = new Wt::WText("00:00");
+	trackCurrentTime->addStyleClass("hidden-xs");
 	bindWidget("curtime", trackCurrentTime);
 
 	_trackDuration = new Wt::WText("00:00");
+	_trackDuration->addStyleClass("hidden-xs");
 	bindWidget("duration", _trackDuration);
 
 	this->doJavaScript(

src/ui/audio/AudioPlayer.hpp

@@ -54,8 +54,6 @@ class AudioPlayer : public Wt::WTemplate
 		Wt::WAudio*	_audio;
 		Wt::WText*	_trackDuration;
 		Wt::WText*	_trackName;
-		Wt::WText*	_artistName;
-		Wt::WText*	_releaseName;
 		Wt::WImage*	_cover;
 };