[UI] Slightly better looking MediaPlayer

src/ui/approot/templates.xml

@@ -308,6 +308,16 @@
 		${apply-info}
 	</div>
 </message>
+
+<message id="mediaplayer-controls">
+	<div class="btn-group" role="group" aria-label="...">
+		${prev}
+		${play}
+		${pause}
+		${next}
+	</div>
+</message>
+
 </messages>
 
 

src/ui/audio/Audio.cpp

@@ -96,6 +96,11 @@ _playQueue(nullptr)
 
 		Wt::WVBoxLayout* playQueueLayout = new Wt::WVBoxLayout();
 
+		_mediaPlayer = new AudioMediaPlayer();
+		playQueueLayout->addWidget(_mediaPlayer);
+
+		playQueueLayout->addWidget( _playQueue, 1);
+
 		Wt::WHBoxLayout* playlistControls = new Wt::WHBoxLayout();
 
 		Wt::WPushButton *saveBtn = new Wt::WPushButton("Save");
@@ -140,11 +145,6 @@ _playQueue(nullptr)
 
 		playQueueLayout->addLayout(playlistControls);
 
-		playQueueLayout->addWidget( _playQueue, 1);
-
-		_mediaPlayer = new AudioMediaPlayer();
-		playQueueLayout->addWidget(_mediaPlayer);
-
 		mainLayout->addLayout(playQueueLayout, 0, 0, 2, 1);
 	}
 

src/ui/audio/AudioMediaPlayer.cpp

@@ -17,11 +17,12 @@
  * along with LMS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-
 #include <Wt/WMediaPlayer>
 #include <Wt/WProgressBar>
 #include <Wt/WCheckBox>
 #include <Wt/WTemplate>
+#include <Wt/WHBoxLayout>
+#include <Wt/WVBoxLayout>
 
 #include "AudioMediaPlayer.hpp"
 
@@ -31,69 +32,94 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent)
 	: Wt::WContainerWidget(parent),
 	_mediaResource(nullptr)
 {
-
 	this->setStyleClass("mediaplayer");
+	this->setHeight(100);
+
+	Wt::WContainerWidget *sliderContainer = new Wt::WContainerWidget(this);
+	Wt::WHBoxLayout *sliderLayout = new Wt::WHBoxLayout();
+	sliderContainer->setLayout(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);
+
+	Wt::WContainerWidget *btnContainer = new Wt::WContainerWidget();
+
+	Wt::WTemplate *t = new Wt::WTemplate(Wt::WString::tr("mediaplayer-controls"), btnContainer);
+
+	Wt::WPushButton *prevBtn = new Wt::WPushButton("<<");
+	t->bindWidget("prev", prevBtn);
+
+	_playBtn = new Wt::WPushButton("Play");
+	t->bindWidget("play", _playBtn);
+	_playBtn->setWidth(70);
+
+	_pauseBtn = new Wt::WPushButton("Pause");
+	t->bindWidget("pause", _pauseBtn);
+	_pauseBtn->setWidth(70);
+
+	Wt::WPushButton *nextBtn = new Wt::WPushButton(">>");
+	t->bindWidget("next", nextBtn);
+
+	controlsLayout->addWidget(btnContainer);
+
+	_volumeSlider = new Wt::WSlider();
+	_volumeSlider->setRange(0,100);
+	_volumeSlider->setWidth(60);
+	_volumeSlider->setMinimumSize(60, Wt::WLength::Auto);
+	_volumeSlider->setHeight(30);
+	controlsLayout->addWidget(_volumeSlider);
+
+/*	Wt::WText* name = new Wt::WText("My track name");
+	controlsLayout->addWidget(name, 1);*/
+
+	   Wt::WCheckBox *loop = new Wt::WCheckBox("Loop", controlsContainer);
+	   loop->changed().connect(std::bind([=] ()
+	   {
+	   _loop.emit( loop->checkState() == Wt::Checked);
+	   }));
+
+	   Wt::WCheckBox *shuffle = new Wt::WCheckBox("Shuffle", controlsContainer);
+	   shuffle->changed().connect(std::bind([=] ()
+	   {
+	   _shuffle.emit( shuffle->checkState() == Wt::Checked);
+	   }));
+
+	   controlsLayout->addWidget(loop);
+	   controlsLayout->addWidget(shuffle);
 
 	_mediaPlayer = new Wt::WMediaPlayer( Wt::WMediaPlayer::Audio, this );
-//	_mediaPlayer->setAlternativeContent (new Wt::WText("You don't have HTML5 audio support!"));
-//	_mediaPlayer->setOptions( Wt::WMediaPlayer::Autoplay );
 	_mediaPlayer->addSource( Wt::WMediaPlayer::OGA, "" );
-
 	_mediaPlayer->ended().connect(this, &AudioMediaPlayer::handleTrackEnded);
 
-	{
+	_mediaPlayer->setControlsWidget( 0 );
-		Wt::WContainerWidget *container = new Wt::WContainerWidget(this);
+	_mediaPlayer->setButton(Wt::WMediaPlayer::Play, _playBtn);
+	_mediaPlayer->setButton(Wt::WMediaPlayer::Pause, _pauseBtn);
 
-		Wt::WCheckBox *loop = new Wt::WCheckBox("Loop", this);
+	_mediaPlayer->timeUpdated().connect(this, &AudioMediaPlayer::handleTimeUpdated);
-		loop->changed().connect(std::bind([=] ()
-		{
-			_loop.emit( loop->checkState() == Wt::Checked);
-		}));
 
-		Wt::WCheckBox *shuffle = new Wt::WCheckBox("Shuffle", this);
+	_volumeSlider->setValue(_mediaPlayer->volume() * 100);
-		shuffle->changed().connect(std::bind([=] ()
-		{
-			_shuffle.emit( shuffle->checkState() == Wt::Checked);
-		}));
 
-		_curTime = new Wt::WText("00:00:00", container);
+	nextBtn->clicked().connect(std::bind([=] ()
-		_timeSlider = new Wt::WSlider( container );
+				{
-		_duration = new Wt::WText("00:00:00", container);
+				_mediaPlayer->stop();
+				_playNext.emit();
+				}));
 
-		Wt::WPushButton *prevBtn = new Wt::WPushButton("<<", container );
+	prevBtn->clicked().connect(std::bind([=] ()
-		_playBtn = new Wt::WPushButton("Play", container );
+				{
-		_pauseBtn = new Wt::WPushButton("Pause", container );
+				_mediaPlayer->stop();
-		Wt::WPushButton *nextBtn = new Wt::WPushButton(">>", container );
+				_playPrevious.emit();
-
+				}));
-
+	   _timeSlider->valueChanged().connect(this, &AudioMediaPlayer::handlePlayOffset);
-		_volumeSlider = new Wt::WSlider( container );
+//	_timeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleSliderMoved);
-		_volumeSlider->setRange(0,100);
-		_volumeSlider->setValue(_mediaPlayer->volume() * 100);
-
-		_mediaPlayer->setControlsWidget( container );
-		_mediaPlayer->setButton(Wt::WMediaPlayer::Play, _playBtn);
-		_mediaPlayer->setButton(Wt::WMediaPlayer::Pause, _pauseBtn);
-
-		_mediaPlayer->setText( Wt::WMediaPlayer::CurrentTime, _curTime);
-		_mediaPlayer->setText( Wt::WMediaPlayer::Duration, _duration);
-
-		_mediaPlayer->timeUpdated().connect(this, &AudioMediaPlayer::handleTimeUpdated);
-
-		nextBtn->clicked().connect(std::bind([=] ()
-		{
-			_mediaPlayer->stop();
-			_playNext.emit();
-		}));
-
-		prevBtn->clicked().connect(std::bind([=] ()
-		{
-			_mediaPlayer->stop();
-			_playPrevious.emit();
-		}));
-	}
-
-	_timeSlider->valueChanged().connect(this, &AudioMediaPlayer::handlePlayOffset);
-	_timeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleSliderMoved);
 	_timeSlider->setDisabled(true);
 
 	_volumeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleVolumeSliderMoved);

src/ui/audio/TableFilter.cpp

@@ -74,7 +74,7 @@ TableFilter::layoutSizeChanged (int width, int height)
 
 	std::size_t trackColumnSize = this->columnWidth(1).toPixels();
 	// Set the remaining size for the name column
-	this->setColumnWidth(0, width - 7 - trackColumnSize - 23 /*Asc wdth */);
+	this->setColumnWidth(0, width - trackColumnSize - (7 * 2) - 2);
 
 	LMS_LOG(MOD_UI, SEV_DEBUG) << "After: sizes = " << this->columnWidth(0).toPixels() << ", " << this->columnWidth(1).toPixels();
 }

src/ui/docroot/css/lms.css

@@ -20,6 +20,6 @@ div.contents {
 
 .mediaplayer {
 	background-color: #ccc;
-	border-radius: 15px;
+	border-radius: 10px;
 }