From 5ae6e644df00ebb43a6f13280ec28b9d7ce8ffb5 Mon Sep 17 00:00:00 2001 From: emeric Date: Sat, 20 Dec 2014 19:31:21 +0100 Subject: [PATCH 1/3] [UI] Made loop/shuffle aligned --- src/ui/approot/templates.xml | 7 +++++ src/ui/audio/AudioMediaPlayer.cpp | 44 ++++++++++++++++++++++--------- src/ui/docroot/css/lms.css | 4 +++ 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/ui/approot/templates.xml b/src/ui/approot/templates.xml index 4a635a85..6182f4f8 100644 --- a/src/ui/approot/templates.xml +++ b/src/ui/approot/templates.xml @@ -318,6 +318,13 @@ + +
+ ${loop} + ${shuffle} +
+ + diff --git a/src/ui/audio/AudioMediaPlayer.cpp b/src/ui/audio/AudioMediaPlayer.cpp index 610c59f2..06de4b45 100644 --- a/src/ui/audio/AudioMediaPlayer.cpp +++ b/src/ui/audio/AudioMediaPlayer.cpp @@ -56,17 +56,21 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent) Wt::WPushButton *prevBtn = new Wt::WPushButton("<<"); t->bindWidget("prev", prevBtn); + prevBtn->setStyleClass("mediaplayer-controls"); _playBtn = new Wt::WPushButton("Play"); t->bindWidget("play", _playBtn); _playBtn->setWidth(70); + _playBtn->setStyleClass("mediaplayer-controls"); _pauseBtn = new Wt::WPushButton("Pause"); t->bindWidget("pause", _pauseBtn); _pauseBtn->setWidth(70); + _pauseBtn->setStyleClass("mediaplayer-controls"); Wt::WPushButton *nextBtn = new Wt::WPushButton(">>"); t->bindWidget("next", nextBtn); + nextBtn->setStyleClass("mediaplayer-controls"); controlsLayout->addWidget(btnContainer); @@ -75,25 +79,42 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent) _volumeSlider->setWidth(60); _volumeSlider->setMinimumSize(60, Wt::WLength::Auto); _volumeSlider->setHeight(30); - controlsLayout->addWidget(_volumeSlider); + controlsLayout->addWidget(_volumeSlider, 1); -/* Wt::WText* name = new Wt::WText("My track name"); - controlsLayout->addWidget(name, 1);*/ + { + Wt::WContainerWidget *loopShuffleContainer = new Wt::WContainerWidget(); - Wt::WCheckBox *loop = new Wt::WCheckBox("Loop", controlsContainer); - loop->changed().connect(std::bind([=] () + Wt::WTemplate *tLoopShuffle = new Wt::WTemplate(Wt::WString::tr("mediaplayer-loopshuffle"), loopShuffleContainer); + + + Wt::WPushButton *loop = new Wt::WPushButton("Loop"); + tLoopShuffle->bindWidget("loop", loop); + loop->setCheckable(true); + loop->setStyleClass("btn-sm"); + loop->checked().connect(std::bind([=] () { - _loop.emit( loop->checkState() == Wt::Checked); + _loop.emit( true ); + })); + loop->unChecked().connect(std::bind([=] () + { + _loop.emit( false ); })); - Wt::WCheckBox *shuffle = new Wt::WCheckBox("Shuffle", controlsContainer); - shuffle->changed().connect(std::bind([=] () + Wt::WPushButton *shuffle = new Wt::WPushButton("Shuffle"); + tLoopShuffle->bindWidget("shuffle", shuffle); + shuffle->setCheckable(true); + shuffle->setStyleClass("btn-sm"); + shuffle->checked().connect(std::bind([=] () { - _shuffle.emit( shuffle->checkState() == Wt::Checked); + _shuffle.emit( true ); + })); + shuffle->unChecked().connect(std::bind([=] () + { + _shuffle.emit( false ); })); - controlsLayout->addWidget(loop); - controlsLayout->addWidget(shuffle); + controlsLayout->addWidget(loopShuffleContainer); + } _mediaPlayer = new Wt::WMediaPlayer( Wt::WMediaPlayer::Audio, this ); _mediaPlayer->addSource( Wt::WMediaPlayer::OGA, "" ); @@ -119,7 +140,6 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent) _playPrevious.emit(); })); _timeSlider->valueChanged().connect(this, &AudioMediaPlayer::handlePlayOffset); -// _timeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleSliderMoved); _timeSlider->setDisabled(true); _volumeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleVolumeSliderMoved); diff --git a/src/ui/docroot/css/lms.css b/src/ui/docroot/css/lms.css index f6333181..68714c7b 100644 --- a/src/ui/docroot/css/lms.css +++ b/src/ui/docroot/css/lms.css @@ -47,3 +47,7 @@ div.contents { border-radius: 10px; } +.mediaplayer-controls { + font-weight: bold; +} + From 10231adbcb49773d7594dee991604d7a9d75e14f Mon Sep 17 00:00:00 2001 From: emeric Date: Sun, 21 Dec 2014 01:13:36 +0100 Subject: [PATCH 2/3] [UI] Setting min width for Mediaplayer. Added buttons for loop/shuffle --- src/ui/approot/templates.xml | 7 ---- src/ui/audio/AudioMediaPlayer.cpp | 63 +++++++++++-------------------- 2 files changed, 22 insertions(+), 48 deletions(-) diff --git a/src/ui/approot/templates.xml b/src/ui/approot/templates.xml index 6182f4f8..4a635a85 100644 --- a/src/ui/approot/templates.xml +++ b/src/ui/approot/templates.xml @@ -318,13 +318,6 @@ - -
- ${loop} - ${shuffle} -
- - diff --git a/src/ui/audio/AudioMediaPlayer.cpp b/src/ui/audio/AudioMediaPlayer.cpp index 06de4b45..2a38a8e5 100644 --- a/src/ui/audio/AudioMediaPlayer.cpp +++ b/src/ui/audio/AudioMediaPlayer.cpp @@ -33,24 +33,27 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent) _mediaResource(nullptr) { this->setStyleClass("mediaplayer"); - this->setHeight(100); + this->setHeight(90); + + Wt::WVBoxLayout* mainLayout = new Wt::WVBoxLayout(); + this->setLayout(mainLayout); - Wt::WContainerWidget *sliderContainer = new Wt::WContainerWidget(this); Wt::WHBoxLayout *sliderLayout = new Wt::WHBoxLayout(); - sliderContainer->setLayout(sliderLayout); + mainLayout->addLayout(sliderLayout); sliderLayout->addWidget(_curTime = new Wt::WText("00:00:00")); _curTime->setLineHeight(30); sliderLayout->addWidget(_timeSlider = new Wt::WSlider( ), 1); - _timeSlider->setHeight(30); sliderLayout->addWidget(_duration = new Wt::WText("00:00:00")); _duration->setLineHeight(30); - Wt::WContainerWidget *controlsContainer = new Wt::WContainerWidget(this); Wt::WHBoxLayout *controlsLayout = new Wt::WHBoxLayout(); - controlsContainer->setLayout(controlsLayout); + + mainLayout->addLayout(controlsLayout); Wt::WContainerWidget *btnContainer = new Wt::WContainerWidget(); + // Do not allow button to wrap + btnContainer->setMinimumSize(155, Wt::WLength::Auto); Wt::WTemplate *t = new Wt::WTemplate(Wt::WString::tr("mediaplayer-controls"), btnContainer); @@ -78,45 +81,23 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent) _volumeSlider->setRange(0,100); _volumeSlider->setWidth(60); _volumeSlider->setMinimumSize(60, Wt::WLength::Auto); - _volumeSlider->setHeight(30); controlsLayout->addWidget(_volumeSlider, 1); - { - Wt::WContainerWidget *loopShuffleContainer = new Wt::WContainerWidget(); + Wt::WPushButton *loop = new Wt::WPushButton("Loop"); + loop->setCheckable(true); + loop->setStyleClass("btn-xs"); + loop->checked().connect(std::bind([=] () { _loop.emit( true ); })); + loop->unChecked().connect(std::bind([=] () { _loop.emit( false ); })); + controlsLayout->addWidget(loop); - Wt::WTemplate *tLoopShuffle = new Wt::WTemplate(Wt::WString::tr("mediaplayer-loopshuffle"), loopShuffleContainer); + Wt::WPushButton *shuffle = new Wt::WPushButton("Shuffle"); + shuffle->setCheckable(true); + shuffle->setStyleClass("btn-xs"); + shuffle->checked().connect(std::bind([=] () { _shuffle.emit( true ); })); + shuffle->unChecked().connect(std::bind([=] () { _shuffle.emit( false );})); + controlsLayout->addWidget(shuffle); - - Wt::WPushButton *loop = new Wt::WPushButton("Loop"); - tLoopShuffle->bindWidget("loop", loop); - loop->setCheckable(true); - loop->setStyleClass("btn-sm"); - loop->checked().connect(std::bind([=] () - { - _loop.emit( true ); - })); - loop->unChecked().connect(std::bind([=] () - { - _loop.emit( false ); - })); - - Wt::WPushButton *shuffle = new Wt::WPushButton("Shuffle"); - tLoopShuffle->bindWidget("shuffle", shuffle); - shuffle->setCheckable(true); - shuffle->setStyleClass("btn-sm"); - shuffle->checked().connect(std::bind([=] () - { - _shuffle.emit( true ); - })); - shuffle->unChecked().connect(std::bind([=] () - { - _shuffle.emit( false ); - })); - - controlsLayout->addWidget(loopShuffleContainer); - } - - _mediaPlayer = new Wt::WMediaPlayer( Wt::WMediaPlayer::Audio, this ); + _mediaPlayer = new Wt::WMediaPlayer( Wt::WMediaPlayer::Audio, btnContainer ); _mediaPlayer->addSource( Wt::WMediaPlayer::OGA, "" ); _mediaPlayer->ended().connect(this, &AudioMediaPlayer::handleTrackEnded); From b1515a8847fd5c6b37a447eae2a4831794675827 Mon Sep 17 00:00:00 2001 From: emeric Date: Sun, 21 Dec 2014 01:28:18 +0100 Subject: [PATCH 3/3] [UI] Adjusted some colors on mediaplayer --- src/ui/docroot/css/lms.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/docroot/css/lms.css b/src/ui/docroot/css/lms.css index 68714c7b..7b8dfaa2 100644 --- a/src/ui/docroot/css/lms.css +++ b/src/ui/docroot/css/lms.css @@ -15,7 +15,7 @@ div.contents { } .playqueue { - background-color: #BBB; + background-color: #EEE; border-radius: 10px; } @@ -43,7 +43,7 @@ div.contents { } .mediaplayer { - background-color: #ccc; + background-color: #CCC; border-radius: 10px; }