Added animation when covers are loaded

This commit is contained in:
emeric
2020-05-18 22:55:34 +02:00
parent bbf0e62393
commit 390f9b82ec
6 changed files with 18 additions and 2 deletions
+9
View File
@@ -75,6 +75,11 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
margin: auto; margin: auto;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
opacity: 0;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
} }
.Lms-cover:hover { .Lms-cover:hover {
@@ -90,6 +95,10 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
} }
.Lms-cover-loaded {
opacity: 1;
}
.Lms-entry-playing { .Lms-entry-playing {
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
+2
View File
@@ -426,6 +426,8 @@ LmsApplication::createHome()
_audioTranscodeResource = std::make_shared<AudioTranscodeResource>(); _audioTranscodeResource = std::make_shared<AudioTranscodeResource>();
_audioFileResource = std::make_shared<AudioFileResource>(); _audioFileResource = std::make_shared<AudioFileResource>();
declareJavaScriptFunction("onLoadCover", "function(id) { id.className += \" Lms-cover-loaded\"}");
Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.template")))}; Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.template")))};
main->addFunction("tr", &Wt::WTemplate::Functions::tr); main->addFunction("tr", &Wt::WTemplate::Functions::tr);
+4 -2
View File
@@ -391,16 +391,18 @@ PlayQueue::addSome()
{ {
Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false)); Wt::WAnchor* anchor = entry->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(), ImageResource::Size::Small)); cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large));
cover->setStyleClass("Lms-cover"); cover->setStyleClass("Lms-cover");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
anchor->setImage(std::move(cover)); anchor->setImage(std::move(cover));
} }
} }
else else
{ {
auto cover = entry->bindNew<Wt::WImage>("cover"); auto cover = entry->bindNew<Wt::WImage>("cover");
cover->setImageLink(LmsApp->getImageResource()->getTrackUrl(track.id(), ImageResource::Size::Small)); cover->setImageLink(LmsApp->getImageResource()->getTrackUrl(track.id(), ImageResource::Size::Large));
cover->setStyleClass("Lms-cover"); cover->setStyleClass("Lms-cover");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
} }
entry->bindString("duration", trackDurationToString(track->getDuration()), Wt::TextFormat::Plain); entry->bindString("duration", trackDurationToString(track->getDuration()), Wt::TextFormat::Plain);
@@ -46,6 +46,7 @@ namespace UserInterface::ReleaseListHelpers
auto cover = std::make_unique<Wt::WImage>(); auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large)); cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large));
cover->setStyleClass("Lms-cover"); cover->setStyleClass("Lms-cover");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
anchor->setImage(std::move(cover)); anchor->setImage(std::move(cover));
auto artists = release->getReleaseArtists(); auto artists = release->getReleaseArtists();
+1
View File
@@ -126,6 +126,7 @@ Release::refreshView()
{ {
Wt::WImage* cover {bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large)))}; Wt::WImage* cover {bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large)))};
cover->setStyleClass("Lms-cover-large"); cover->setStyleClass("Lms-cover-large");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
} }
Wt::WContainerWidget* clusterContainers {bindNew<Wt::WContainerWidget>("clusters")}; Wt::WContainerWidget* clusterContainers {bindNew<Wt::WContainerWidget>("clusters")};
+1
View File
@@ -74,6 +74,7 @@ namespace UserInterface::TrackListHelpers
auto cover = std::make_unique<Wt::WImage>(); auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large)); cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), ImageResource::Size::Large));
cover->setStyleClass("Lms-cover"); cover->setStyleClass("Lms-cover");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
anchor->setImage(std::move(cover)); anchor->setImage(std::move(cover));
} }
} }