From 799d7a4b32db68242edf13091e968c257a7900a0 Mon Sep 17 00:00:00 2001 From: emeric Date: Sun, 14 Dec 2014 17:09:29 +0100 Subject: [PATCH] [UI] Slightly better looking MediaPlayer --- src/ui/approot/templates.xml | 10 +++ src/ui/audio/Audio.cpp | 10 +-- src/ui/audio/AudioMediaPlayer.cpp | 134 ++++++++++++++++++------------ src/ui/audio/TableFilter.cpp | 2 +- src/ui/docroot/css/lms.css | 2 +- 5 files changed, 97 insertions(+), 61 deletions(-) diff --git a/src/ui/approot/templates.xml b/src/ui/approot/templates.xml index f4feb002..4a635a85 100644 --- a/src/ui/approot/templates.xml +++ b/src/ui/approot/templates.xml @@ -308,6 +308,16 @@ ${apply-info} + + +
+ ${prev} + ${play} + ${pause} + ${next} +
+ + diff --git a/src/ui/audio/Audio.cpp b/src/ui/audio/Audio.cpp index abcaa61d..766f880b 100644 --- a/src/ui/audio/Audio.cpp +++ b/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); } diff --git a/src/ui/audio/AudioMediaPlayer.cpp b/src/ui/audio/AudioMediaPlayer.cpp index 7efba7f8..610c59f2 100644 --- a/src/ui/audio/AudioMediaPlayer.cpp +++ b/src/ui/audio/AudioMediaPlayer.cpp @@ -17,11 +17,12 @@ * along with LMS. If not, see . */ - #include #include #include #include +#include +#include #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); - { - Wt::WContainerWidget *container = new Wt::WContainerWidget(this); + _mediaPlayer->setControlsWidget( 0 ); + _mediaPlayer->setButton(Wt::WMediaPlayer::Play, _playBtn); + _mediaPlayer->setButton(Wt::WMediaPlayer::Pause, _pauseBtn); - Wt::WCheckBox *loop = new Wt::WCheckBox("Loop", this); - loop->changed().connect(std::bind([=] () - { - _loop.emit( loop->checkState() == Wt::Checked); - })); + _mediaPlayer->timeUpdated().connect(this, &AudioMediaPlayer::handleTimeUpdated); - Wt::WCheckBox *shuffle = new Wt::WCheckBox("Shuffle", this); - shuffle->changed().connect(std::bind([=] () - { - _shuffle.emit( shuffle->checkState() == Wt::Checked); - })); + _volumeSlider->setValue(_mediaPlayer->volume() * 100); - _curTime = new Wt::WText("00:00:00", container); - _timeSlider = new Wt::WSlider( container ); - _duration = new Wt::WText("00:00:00", container); + nextBtn->clicked().connect(std::bind([=] () + { + _mediaPlayer->stop(); + _playNext.emit(); + })); - Wt::WPushButton *prevBtn = new Wt::WPushButton("<<", container ); - _playBtn = new Wt::WPushButton("Play", container ); - _pauseBtn = new Wt::WPushButton("Pause", container ); - Wt::WPushButton *nextBtn = new Wt::WPushButton(">>", container ); - - - _volumeSlider = new Wt::WSlider( container ); - _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); + 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); diff --git a/src/ui/audio/TableFilter.cpp b/src/ui/audio/TableFilter.cpp index 5a521918..b2c156db 100644 --- a/src/ui/audio/TableFilter.cpp +++ b/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(); } diff --git a/src/ui/docroot/css/lms.css b/src/ui/docroot/css/lms.css index 131ffa8d..1b5ed3f8 100644 --- a/src/ui/docroot/css/lms.css +++ b/src/ui/docroot/css/lms.css @@ -20,6 +20,6 @@ div.contents { .mediaplayer { background-color: #ccc; - border-radius: 15px; + border-radius: 10px; }