[UI] Better looking
This commit is contained in:
+12
-3
@@ -529,11 +529,20 @@
|
|||||||
</message>
|
</message>
|
||||||
|
|
||||||
<message id="wa-audio-player">
|
<message id="wa-audio-player">
|
||||||
${audio}${prev}${play-pause}${next}
|
${audio}
|
||||||
<div class="mediaplayer-cover">
|
${prev}${play-pause}${next}
|
||||||
|
<div class="mediaplayer-cover hidden-xs">
|
||||||
${cover}
|
${cover}
|
||||||
</div>
|
</div>
|
||||||
${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist}
|
<div class="mediaplayer-info-container">
|
||||||
|
<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span> <br/>
|
||||||
|
${seekbar}
|
||||||
|
</div>
|
||||||
|
${curtime}${duration}
|
||||||
|
<div class="mediaplayer-volume-container visible-lg">
|
||||||
|
${volume}
|
||||||
|
</div>
|
||||||
|
${shuffle}${repeat}${playlist}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
</messages>
|
</messages>
|
||||||
|
|||||||
@@ -86,6 +86,26 @@
|
|||||||
color: #428bca;
|
color: #428bca;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mediaplayer-info-container {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-volume-container {
|
||||||
|
width: 24px;
|
||||||
|
height: 64px;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-volume {
|
||||||
|
height: 64px;
|
||||||
|
-webkit-appearance: slider-vertical;
|
||||||
|
writing-mode: bt-lr;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-search-title {
|
.mobile-search-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|||||||
@@ -45,9 +45,8 @@ AudioPlayer::loadTrack(Database::Track::id_type trackId)
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
_trackName->setText(Wt::WString::fromUTF8(track->getName()));
|
bindString("track", Wt::WString::fromUTF8(track->getName()));
|
||||||
_artistName->setText( Wt::WString::fromUTF8(track->getArtist()->getName()));
|
bindString("artist", Wt::WString::fromUTF8(track->getArtist()->getName()));
|
||||||
_releaseName->setText( Wt::WString::fromUTF8(track->getRelease()->getName()));
|
|
||||||
_cover->setImageLink(SessionCoverResource()->getTrackUrl(trackId, 64));
|
_cover->setImageLink(SessionCoverResource()->getTrackUrl(trackId, 64));
|
||||||
_trackDuration->setText( boost::posix_time::to_simple_string( track->getDuration() ));
|
_trackDuration->setText( boost::posix_time::to_simple_string( track->getDuration() ));
|
||||||
|
|
||||||
@@ -111,16 +110,12 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
|
|||||||
InputRange *seekbar = new InputRange();
|
InputRange *seekbar = new InputRange();
|
||||||
bindWidget("seekbar", seekbar);
|
bindWidget("seekbar", seekbar);
|
||||||
|
|
||||||
_trackName = new Wt::WText();
|
bindString("track", "Track");
|
||||||
bindWidget("track", _trackName);
|
bindString("artist", "Artist");
|
||||||
|
|
||||||
_artistName = new Wt::WText();
|
|
||||||
bindWidget("artist", _artistName);
|
|
||||||
|
|
||||||
_releaseName = new Wt::WText();
|
|
||||||
bindWidget("release", _releaseName);
|
|
||||||
|
|
||||||
InputRange *volumeSlider = new InputRange();
|
InputRange *volumeSlider = new InputRange();
|
||||||
|
volumeSlider->addStyleClass("mediaplayer-volume");
|
||||||
|
volumeSlider->setAttributeValue("orient", "vertical"); // firefox
|
||||||
bindWidget("volume", volumeSlider);
|
bindWidget("volume", volumeSlider);
|
||||||
|
|
||||||
Wt::WText *playlistBtn = new Wt::WText("<i class=\"fa fa-list fa-2x\"></i>", Wt::XHTMLText);
|
Wt::WText *playlistBtn = new Wt::WText("<i class=\"fa fa-list fa-2x\"></i>", Wt::XHTMLText);
|
||||||
@@ -162,7 +157,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
Wt::WText *prevBtn = new Wt::WText("<i class=\"fa fa-step-backward fa-2x\"></i>", Wt::XHTMLText);
|
Wt::WText *prevBtn = new Wt::WText("<i class=\"fa fa-step-backward fa-2x\"></i>", Wt::XHTMLText);
|
||||||
prevBtn->addStyleClass("mediaplayer-btn");
|
prevBtn->addStyleClass("mediaplayer-btn hidden-xs");
|
||||||
bindWidget("prev", prevBtn);
|
bindWidget("prev", prevBtn);
|
||||||
prevBtn->clicked().connect(std::bind([=] ()
|
prevBtn->clicked().connect(std::bind([=] ()
|
||||||
{
|
{
|
||||||
@@ -182,9 +177,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
|
|||||||
bindWidget("play-pause", playPauseBtn);
|
bindWidget("play-pause", playPauseBtn);
|
||||||
|
|
||||||
Wt::WText *trackCurrentTime = new Wt::WText("00:00");
|
Wt::WText *trackCurrentTime = new Wt::WText("00:00");
|
||||||
|
trackCurrentTime->addStyleClass("hidden-xs");
|
||||||
bindWidget("curtime", trackCurrentTime);
|
bindWidget("curtime", trackCurrentTime);
|
||||||
|
|
||||||
_trackDuration = new Wt::WText("00:00");
|
_trackDuration = new Wt::WText("00:00");
|
||||||
|
_trackDuration->addStyleClass("hidden-xs");
|
||||||
bindWidget("duration", _trackDuration);
|
bindWidget("duration", _trackDuration);
|
||||||
|
|
||||||
this->doJavaScript(
|
this->doJavaScript(
|
||||||
|
|||||||
@@ -54,8 +54,6 @@ class AudioPlayer : public Wt::WTemplate
|
|||||||
Wt::WAudio* _audio;
|
Wt::WAudio* _audio;
|
||||||
Wt::WText* _trackDuration;
|
Wt::WText* _trackDuration;
|
||||||
Wt::WText* _trackName;
|
Wt::WText* _trackName;
|
||||||
Wt::WText* _artistName;
|
|
||||||
Wt::WText* _releaseName;
|
|
||||||
Wt::WImage* _cover;
|
Wt::WImage* _cover;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user