[UI] Mobile audio player inside a footer: first draft

src/ui/LmsApplication.cpp

@@ -50,6 +50,7 @@ namespace {
 bool agentIsMobile()
 {
 	const Wt::WEnvironment& env = Wt::WApplication::instance()->environment();
+	return true;
 	return (env.agentIsIEMobile()
 		|| env.agentIsMobileWebKit()
 		|| env.userAgent().find("Mobile") != std::string::npos // Workaround for firefox

src/ui/approot/templates.xml

@@ -338,7 +338,7 @@
 <message id="mobile-search-title">
 	<div class="row">
 		<div class="col-xs-12">
-			<div class="mobile-search-title vertical-align">${text}</div>
+			<div class="mobile-search-title">${text}</div>
 		</div>
 	</div>
 </message>
@@ -389,9 +389,21 @@
 	</div>
 </message>
 
+<message id="mobile-audio-footer">
+	<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+		${player}
+	</nav>
+</message>
+
 <message id="mobile-audio-player">
-	<div class="row">
+	<div class="container">
-		<div class="col-xs-12">${player}</div>
+		<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>
 	</div>
 </message>
 

src/ui/audio/mobile/MobileAudio.cpp

@@ -60,8 +60,8 @@ _db(db)
 	ReleaseSearch* releaseSearch = new ReleaseSearch(_db, this);
 	TrackSearch* trackSearch = new TrackSearch(_db, this);
 
-	Wt::WTemplate* playerTemplate = new Wt::WTemplate(this);
+	Wt::WTemplate* footer = new Wt::WTemplate(this);
-	playerTemplate->setTemplateText(Wt::WString::tr("mobile-audio-player"));
+	footer->setTemplateText(Wt::WString::tr("mobile-audio-footer"));
 
 	Wt::Dbo::Transaction transaction(_db.getSession());
 	Database::User::pointer user = _db.getCurrentUser();
@@ -79,8 +79,8 @@ _db(db)
 			encoding = AudioMediaPlayer::getBestEncoding();
 	}
 
-	AudioMediaPlayer* mediaPlayer = new AudioMediaPlayer(encoding);
+	AudioMediaPlayer* mediaPlayer = new AudioMediaPlayer(db, encoding);
-	playerTemplate->bindWidget("player", mediaPlayer);
+	footer->bindWidget("player", mediaPlayer);
 
 	edit->changed().connect(std::bind([=] () {
 		std::string text = edit->text().toUTF8();
@@ -207,7 +207,7 @@ _db(db)
 			Transcode::Parameters parameters(inputFile, Transcode::Format::get(encoding));
 			parameters.setBitrate(Transcode::Stream::Audio, 96000);
 
-			mediaPlayer->play(parameters);
+			mediaPlayer->play(track.id(), parameters);
 		}
 	} , std::placeholders::_1));
 

src/ui/audio/mobile/MobileAudioMediaPlayer.cpp

@@ -17,6 +17,10 @@
  * along with LMS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+#include <Wt/WApplication>
+#include <Wt/WEnvironment>
+#include <Wt/WTemplate>
+#include <Wt/WPushButton>
 
 #include "MobileAudioMediaPlayer.hpp"
 
@@ -32,18 +36,45 @@ AudioMediaPlayer::getBestEncoding()
 	return Wt::WMediaPlayer::MP3;
 }
 
-AudioMediaPlayer::AudioMediaPlayer(Wt::WMediaPlayer::Encoding encoding, Wt::WContainerWidget *parent)
+AudioMediaPlayer::AudioMediaPlayer(Database::Handler& db, Wt::WMediaPlayer::Encoding encoding, Wt::WContainerWidget *parent)
 :
  Wt::WContainerWidget(parent),
 _player(nullptr),
 _encoding(encoding)
 {
+	_coverResource = new CoverResource(db, 56);
+
+	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");
+	container->bindWidget("play", play);
+
+	Wt::WPushButton *pause = new Wt::WPushButton("Pause");
+	container->bindWidget("pause", pause);
+
+	Wt::WPushButton *next = new Wt::WPushButton(">>");
+	container->bindWidget("next", next);
+
+	_cover = new Wt::WImage();
+	container->bindWidget("cover", _cover);
+
+	Wt::WSlider *volume = new Wt::WSlider();
+	container->bindWidget("volume", volume);
+
 	_player = new Wt::WMediaPlayer(Wt::WMediaPlayer::Audio, this);
 	_player->addSource( _encoding, "" );
+	_player->setControlsWidget( 0 );
+	_player->setButton(Wt::WMediaPlayer::Play, play);
+	_player->setButton(Wt::WMediaPlayer::Pause, pause);
+
 }
 
 void
-AudioMediaPlayer::play(const Transcode::Parameters& parameters)
+AudioMediaPlayer::play(Database::Track::id_type trackId, const Transcode::Parameters& parameters)
 {
 	// FIXME memleak here
 	AvConvTranscodeStreamResource *resource = new AvConvTranscodeStreamResource( parameters, this );
@@ -52,6 +83,8 @@ AudioMediaPlayer::play(const Transcode::Parameters& parameters)
 	_player->addSource( _encoding, Wt::WLink(resource));
 
 	_player->play();
+
+	_cover->setImageLink( Wt::WLink (_coverResource->getTrackUrl(trackId)));
 }
 
 } // namespace UserInterface

src/ui/audio/mobile/MobileAudioMediaPlayer.hpp

@@ -22,7 +22,10 @@
 
 #include <Wt/WContainerWidget>
 #include <Wt/WMediaPlayer>
+#include <Wt/WImage>
 
+#include "database/DatabaseHandler.hpp"
+#include "resource/CoverResource.hpp"
 #include "transcode/Parameters.hpp"
 
 namespace UserInterface {
@@ -34,17 +37,21 @@ class AudioMediaPlayer : public Wt::WContainerWidget
 
 		static Wt::WMediaPlayer::Encoding getBestEncoding();
 
-		AudioMediaPlayer(Wt::WMediaPlayer::Encoding encoding, Wt::WContainerWidget *parent = 0);
+		AudioMediaPlayer(Database::Handler& db, Wt::WMediaPlayer::Encoding encoding, Wt::WContainerWidget *parent = 0);
 
-		void play(const Transcode::Parameters& parameters);
+		void play(Database::Track::id_type trackId, const Transcode::Parameters& parameters);
 
 		Wt::WMediaPlayer::Encoding getEncoding() const { return _encoding; }
 
 	private:
 
-		Wt::WMediaPlayer *_player;
+		CoverResource* _coverResource;
+
+		Wt::WMediaPlayer* _player;
 		Wt::WMediaPlayer::Encoding _encoding;
 
+		Wt::WImage* _cover;
+
 };
 
 } // namespace UserInterface

src/ui/docroot/css/lms.css

@@ -58,6 +58,7 @@ div.contents {
 .mobile-search-title {
 	font-weight: bold;
 	height: 32px;
+	line-height: 32px;
 	background-color: grey;
 	color: white;
 	text-align: center;
@@ -96,3 +97,11 @@ div.contents {
 	align-items: center;
 }
 
+.mobile-audio-footer {
+	background-color: #f5f5f5;
+	bottom: 0;
+	height: 60px;
+	position: absolute;
+	width: 100%;
+}
+