[UI] Updated the mobile audio footer

src/ui/approot/templates.xml

@@ -398,11 +398,24 @@
 <message id="mobile-audio-player">
 	<div class="container">
 		<div class="row">
-			<div class="col-xs-2">${prev}</div>
-			<div class="col-xs-2">${play}${pause}</div>
-			<div class="col-xs-2">${next}</div>
-			<div class="col-xs-2">${cover}</div>
-			<div class="col-xs-4">${volume}</div>
+			<div class="col-xs-12">
+				<div class="row">
+					<div class="mobile-audio-footer">
+						<div class="vertical-align mobile-audio-footer">
+							<div class="col-xs-2">${cover}</div>
+							<div class="col-xs-7">
+								<div class="row">
+									<div class="col-xs-12">${track}</div>
+								</div>
+								<div class="row">
+									<div class="col-xs-12">${artist}</div>
+								</div>
+							</div>
+							<div class="col-xs-3">${play}${pause}</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </message>

src/ui/audio/mobile/MobileAudio.cpp

@@ -24,7 +24,6 @@
 #include <Wt/WContainerWidget>
 #include <Wt/WTemplate>
 #include <Wt/WLineEdit>
-#include <Wt/WPushButton>
 #include <Wt/WText>
 #include <Wt/WTable>
 
@@ -45,7 +44,8 @@ Audio::Audio(Database::Handler& db, Wt::WContainerWidget *parent)
 _db(db)
 {
 	// Root div has to be a "container"
-	this->setStyleClass("container");
+	this->setStyleClass("container-fluid");
+	this->setPadding(60, Wt::Bottom);
 
 	Wt::WTemplate* search = new Wt::WTemplate(this);
 	search->setTemplateText(Wt::WString::tr("mobile-search"));

src/ui/audio/mobile/MobileAudioMediaPlayer.cpp

@@ -21,6 +21,7 @@
 #include <Wt/WEnvironment>
 #include <Wt/WTemplate>
 #include <Wt/WPushButton>
+#include <Wt/WSlider>
 
 #include "MobileAudioMediaPlayer.hpp"
 
@@ -39,31 +40,37 @@ AudioMediaPlayer::getBestEncoding()
 AudioMediaPlayer::AudioMediaPlayer(Database::Handler& db, Wt::WMediaPlayer::Encoding encoding, Wt::WContainerWidget *parent)
 :
  Wt::WContainerWidget(parent),
+_db(db),
 _player(nullptr),
 _encoding(encoding)
 {
-	_coverResource = new CoverResource(db, 56);
+	_coverResource = new CoverResource(db, 48);
 
 	Wt::WTemplate* container  = new Wt::WTemplate(this);
 	container->setTemplateText(Wt::WString::tr("mobile-audio-player"));
 
-	Wt::WPushButton *prev = new Wt::WPushButton("<<");
-	container->bindWidget("prev", prev);
-
 	Wt::WPushButton *play = new Wt::WPushButton("Play");
+	play->setStyleClass("btn-sm");
+	play->setWidth(52);
 	container->bindWidget("play", play);
 
 	Wt::WPushButton *pause = new Wt::WPushButton("Pause");
+	pause->setStyleClass("btn-sm");
+	pause->setWidth(52);
 	container->bindWidget("pause", pause);
 
-	Wt::WPushButton *next = new Wt::WPushButton(">>");
-	container->bindWidget("next", next);
+	_track = new Wt::WText("", Wt::PlainText);
+	_track->setStyleClass("mobile-track");
+	container->bindWidget("track", _track);
+
+	_artistRelease = new Wt::WText("", Wt::PlainText);
+	_artistRelease->setStyleClass("mobile-artist");
+	container->bindWidget("artist", _artistRelease);
 
 	_cover = new Wt::WImage();
 	container->bindWidget("cover", _cover);
+	_cover->setStyleClass("mobile-audio-player-cover");
 
-	Wt::WSlider *volume = new Wt::WSlider();
-	container->bindWidget("volume", volume);
 
 	_player = new Wt::WMediaPlayer(Wt::WMediaPlayer::Audio, this);
 	_player->addSource( _encoding, "" );
@@ -85,6 +92,15 @@ AudioMediaPlayer::play(Database::Track::id_type trackId, const Transcode::Parame
 	_player->play();
 
 	_cover->setImageLink( Wt::WLink (_coverResource->getTrackUrl(trackId)));
+
+	{
+		Wt::Dbo::Transaction transaction(_db.getSession());
+
+		Database::Track::pointer track = Database::Track::getById(_db.getSession(), trackId);
+
+		_track->setText( Wt::WString::fromUTF8(track->getName() ));
+		_artistRelease->setText( Wt::WString::fromUTF8(track->getArtistName()) );
+	}
 }
 
 } // namespace UserInterface

src/ui/audio/mobile/MobileAudioMediaPlayer.hpp

@@ -45,12 +45,15 @@ class AudioMediaPlayer : public Wt::WContainerWidget
 
 	private:
 
+		Database::Handler& _db;
 		CoverResource* _coverResource;
 
 		Wt::WMediaPlayer* _player;
 		Wt::WMediaPlayer::Encoding _encoding;
 
 		Wt::WImage* _cover;
+		Wt::WText* _track;
+		Wt::WText* _artistRelease;
 
 };
 

src/ui/docroot/css/lms.css

@@ -99,9 +99,11 @@ div.contents {
 
 .mobile-audio-footer {
 	background-color: #f5f5f5;
-	bottom: 0;
 	height: 60px;
-	position: absolute;
-	width: 100%;
+}
+
+.mobile-audio-player-cover {
+	width:	48px;
+	height:	48px;
 }