Added covers for the tracks view

This commit is contained in:
emeric
2020-04-14 21:32:44 +02:00
parent 8f2c36ede9
commit 8d0a18d1ed
4 changed files with 33 additions and 7 deletions
+7
View File
@@ -25,12 +25,19 @@
<message id="Lms.Explore.Tracks.template.entry"> <message id="Lms.Explore.Tracks.template.entry">
<div class="row Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align ${is-playing}"> <div class="row Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align ${is-playing}">
<div class="col-xs-9 Lms-explore-tracks-entry-name"> <div class="col-xs-9 Lms-explore-tracks-entry-name">
<div class="media">
<div class="media-left media-middle hidden-xs">
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<h4><div class="Lms-trackname text-primary">${name}</div></h4> <h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>} ${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>} ${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>} ${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>} ${</if-has-artists-or-release>}
</div> </div>
</div>
</div>
<div class="col-xs-3"> <div class="col-xs-3">
<div class="Lms-explore-tracks-entry-controls"> <div class="Lms-explore-tracks-entry-controls">
${play-btn}${add-btn} ${play-btn}${add-btn}
+7 -1
View File
@@ -119,12 +119,18 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
filter: brightness(130%); filter: brightness(130%);
} }
.Lms-cover-small { .Lms-cover-smaller {
width: 64px; /* some cover may not be square */ width: 64px; /* some cover may not be square */
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
} }
.Lms-cover-small {
width: 96px; /* some cover may not be square */
border-radius: 12px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Lms-cover-medium { .Lms-cover-medium {
width: 128px; width: 128px;
border-radius: 16px; border-radius: 16px;
+1 -1
View File
@@ -40,7 +40,7 @@ ReleaseLink::ReleaseLink(Database::Release::pointer release)
Wt::WAnchor* anchor = bindWidget("cover", LmsApplication::createReleaseAnchor(release, false)); Wt::WAnchor* anchor = bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
auto cover = std::make_unique<Wt::WImage>(); auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 64)); cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 64));
cover->setStyleClass("Lms-cover-small"); cover->setStyleClass("Lms-cover-smaller");
anchor->setImage(std::move(cover)); anchor->setImage(std::move(cover));
auto artists = release->getReleaseArtists(); auto artists = release->getReleaseArtists();
+13
View File
@@ -144,6 +144,19 @@ Tracks::addSome()
{ {
entry->setCondition("if-has-release", true); entry->setCondition("if-has-release", true);
entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease())); entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease()));
{
Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 96));
cover->setStyleClass("Lms-cover-small");
anchor->setImage(std::move(cover));
}
}
else
{
auto cover = entry->bindNew<Wt::WImage>("cover");
cover->setImageLink(LmsApp->getImageResource()->getTrackUrl(trackId, 96));
cover->setStyleClass("Lms-cover-small");
} }
entry->bindString("duration", trackDurationToString(track->getDuration()), Wt::TextFormat::Plain); entry->bindString("duration", trackDurationToString(track->getDuration()), Wt::TextFormat::Plain);