[UI] Better looking
This commit is contained in:
@@ -531,16 +531,19 @@
|
|||||||
<message id="wa-audio-player">
|
<message id="wa-audio-player">
|
||||||
${audio}
|
${audio}
|
||||||
${prev}${play-pause}${next}
|
${prev}${play-pause}${next}
|
||||||
|
<div class="mediaplayer-volume-container visible-lg">
|
||||||
|
${volume}
|
||||||
|
</div>
|
||||||
<div class="mediaplayer-cover hidden-xs">
|
<div class="mediaplayer-cover hidden-xs">
|
||||||
${cover}
|
${cover}
|
||||||
</div>
|
</div>
|
||||||
<div class="mediaplayer-info-container">
|
<div class="mediaplayer-info-container">
|
||||||
<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span> <br/>
|
<div class="mediaplayer-track-info">
|
||||||
${seekbar}
|
<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span>
|
||||||
</div>
|
</div>
|
||||||
${curtime}${duration}
|
<div class="mediaplayer-progress-container">
|
||||||
<div class="mediaplayer-volume-container visible-lg">
|
${curtime}${seekbar}${duration}
|
||||||
${volume}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${shuffle}${repeat}${playlist}
|
${shuffle}${repeat}${playlist}
|
||||||
</message>
|
</message>
|
||||||
|
|||||||
+25
-2
@@ -87,11 +87,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mediaplayer-info-container {
|
.mediaplayer-info-container {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100px;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-track-info {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 100%;
|
}
|
||||||
margin: 8px;
|
|
||||||
|
.mediaplayer-progress-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-badge {
|
||||||
|
min-width: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-current-duration {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.mediaplayer-total-duration {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaplayer-seekbar {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaplayer-volume-container {
|
.mediaplayer-volume-container {
|
||||||
|
|||||||
@@ -108,6 +108,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
|
|||||||
_cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64));
|
_cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64));
|
||||||
|
|
||||||
InputRange *seekbar = new InputRange();
|
InputRange *seekbar = new InputRange();
|
||||||
|
seekbar->addStyleClass("mediaplayer-seekbar");
|
||||||
bindWidget("seekbar", seekbar);
|
bindWidget("seekbar", seekbar);
|
||||||
|
|
||||||
bindString("track", "Track");
|
bindString("track", "Track");
|
||||||
@@ -177,11 +178,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");
|
trackCurrentTime->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-current-duration");
|
||||||
bindWidget("curtime", trackCurrentTime);
|
bindWidget("curtime", trackCurrentTime);
|
||||||
|
|
||||||
_trackDuration = new Wt::WText("00:00");
|
_trackDuration = new Wt::WText("00:00");
|
||||||
_trackDuration->addStyleClass("hidden-xs");
|
_trackDuration->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-total-duration");
|
||||||
bindWidget("duration", _trackDuration);
|
bindWidget("duration", _trackDuration);
|
||||||
|
|
||||||
this->doJavaScript(
|
this->doJavaScript(
|
||||||
|
|||||||
Reference in New Issue
Block a user