diff --git a/src/ui/approot/templates.xml b/src/ui/approot/templates.xml index 879bc3b4..b55f513b 100644 --- a/src/ui/approot/templates.xml +++ b/src/ui/approot/templates.xml @@ -398,11 +398,24 @@
-
${prev}
-
${play}${pause}
-
${next}
-
${cover}
-
${volume}
+
+
+ +
+
diff --git a/src/ui/audio/mobile/MobileAudio.cpp b/src/ui/audio/mobile/MobileAudio.cpp index d075b263..fdc97e5e 100644 --- a/src/ui/audio/mobile/MobileAudio.cpp +++ b/src/ui/audio/mobile/MobileAudio.cpp @@ -24,7 +24,6 @@ #include #include #include -#include #include #include @@ -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")); diff --git a/src/ui/audio/mobile/MobileAudioMediaPlayer.cpp b/src/ui/audio/mobile/MobileAudioMediaPlayer.cpp index 5bf0f039..48e2dd67 100644 --- a/src/ui/audio/mobile/MobileAudioMediaPlayer.cpp +++ b/src/ui/audio/mobile/MobileAudioMediaPlayer.cpp @@ -21,6 +21,7 @@ #include #include #include +#include #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 diff --git a/src/ui/audio/mobile/MobileAudioMediaPlayer.hpp b/src/ui/audio/mobile/MobileAudioMediaPlayer.hpp index b222c248..c9b7ce8d 100644 --- a/src/ui/audio/mobile/MobileAudioMediaPlayer.hpp +++ b/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; }; diff --git a/src/ui/docroot/css/lms.css b/src/ui/docroot/css/lms.css index df0c362a..d8888a55 100644 --- a/src/ui/docroot/css/lms.css +++ b/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; }