Still converting to bootstrap 5. Some cover refacto

approot/release.xml

@@ -9,7 +9,7 @@
 <message id="Lms.Explore.Release.template">
 	<div class="row mb-3 gy-3">
 		<div class="col-lg-3 col-md-4">
-			${cover class="Lms-explore-release-cover"}
+			${cover}
 		</div>
 		<div class="col">
 			<h3>${name}</h3>

docroot/css/lms.css

@@ -8,11 +8,6 @@ body {
 	padding-bottom: 78px;
 }
 
-.Lms-cover-small {
-	width: 64px;
-	min-width: 64px;
-}
-
 .Lms-notification-container {
 	position: fixed;
 	bottom: 78px;
@@ -32,6 +27,19 @@ body {
 }
 
 .Lms-cover {
+	opacity: 0;
+	transition: opacity 1s;
+}
+
+.Lms-cover-container {
+	position: relative;
+}
+
+.Lms-cover-loaded {
+	opacity: 1;
+}
+
+.Lms-cover-release {
 	max-height: 100%;
 	max-width: 100%;
 	width: auto;
@@ -44,8 +52,9 @@ body {
 	margin: auto;
 }
 
-.Lms-cover-container {
+.Lms-cover-track {
-	position: relative;
+	width: 64px;
+	min-width: 64px;
 }
 
 .Lms-responsive-square {

src/lms/CMakeLists.txt

@@ -11,7 +11,7 @@ add_executable(lms
 	ui/NotificationContainer.cpp
 	ui/PlayQueue.cpp
 	ui/SettingsView.cpp
-	ui/TrackStringUtils.cpp
+	ui/Utils.cpp
 	ui/admin/DatabaseSettingsView.cpp
 	ui/admin/ScannerController.cpp
 	ui/admin/InitWizardView.cpp

src/lms/ui/PlayQueue.cpp

@@ -36,11 +36,10 @@
 #include "utils/String.hpp"
 
 #include "common/InfiniteScrollingContainer.hpp"
-#include "resource/CoverResource.hpp"
 #include "resource/DownloadResource.hpp"
 #include "LmsApplication.hpp"
 #include "MediaPlayer.hpp"
-#include "TrackStringUtils.hpp"
+#include "Utils.hpp"
 
 namespace UserInterface {
 
@@ -408,22 +407,18 @@ PlayQueue::addEntry(const Database::TrackListEntry::pointer& tracklistEntry)
 		entry->bindWidget("release", LmsApplication::createReleaseAnchor(release));
 		{
 			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
-			auto cover {std::make_unique<Wt::WImage>()};
+			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Small)};
-			cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large));
+			cover->addStyleClass("Lms-cover-track"); // HACK
-			cover->setStyleClass("img-fluid"); // HACK
-			cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
 			anchor->setImage(std::move(cover));
 		}
 	}
 	else
 	{
-		auto cover = entry->bindNew<Wt::WImage>("cover");
+		auto cover {entry->bindWidget<Wt::WImage>("cover", Utils::createCover(track->getId(), CoverResource::Size::Small))};
-		cover->setImageLink(LmsApp->getCoverResource()->getTrackUrl(track->getId(), CoverResource::Size::Large));
+		cover->addStyleClass("Lms-cover-track");
-		cover->setStyleClass("img-fluid"); // HACK
-		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
 	}
 
-	entry->bindString("duration", durationToString(track->getDuration()), Wt::TextFormat::Plain);
+	entry->bindString("duration", Utils::durationToString(track->getDuration()), Wt::TextFormat::Plain);
 
 	Wt::WText* playBtn {entry->bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.PlayQueue.template.play-btn"), Wt::TextFormat::XHTML)};
 	playBtn->clicked().connect([=]

src/lms/ui/TrackStringUtils.cpp

@@ -1,37 +0,0 @@
-/*
- * Copyright (C) 2020 Emeric Poupon
- *
- * This file is part of LMS.
- *
- * LMS is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * LMS is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with LMS.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-#include "TrackStringUtils.hpp"
-
-#include <iomanip>
-#include <sstream>
-
-std::string
-durationToString(std::chrono::milliseconds msDuration)
-{
-	const std::chrono::seconds duration {std::chrono::duration_cast<std::chrono::seconds>(msDuration)};
-
-	std::ostringstream oss;
-	oss << (duration.count() / 60)
-		<< ":"
-		<< std::setfill('0') << std::setw(2) << duration.count() % 60;
-
-	return oss.str();
-}
-

src/lms/ui/Utils.cpp

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2020 Emeric Poupon
+ *
+ * This file is part of LMS.
+ *
+ * LMS is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LMS is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LMS.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include "Utils.hpp"
+
+#include <iomanip>
+#include <sstream>
+
+#include "LmsApplication.hpp"
+
+namespace UserInterface::Utils
+{
+
+	std::string
+	durationToString(std::chrono::milliseconds msDuration)
+	{
+		const std::chrono::seconds duration {std::chrono::duration_cast<std::chrono::seconds>(msDuration)};
+
+		std::ostringstream oss;
+		oss << (duration.count() / 60)
+			<< ":"
+			<< std::setfill('0') << std::setw(2) << duration.count() % 60;
+
+		return oss.str();
+	}
+
+
+	std::unique_ptr<Wt::WImage>
+	createCover(Database::ReleaseId releaseId, CoverResource::Size size)
+	{
+		auto cover {std::make_unique<Wt::WImage>()};
+		cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(releaseId, size));
+		cover->setStyleClass("Lms-cover img-fluid"); // HACK
+		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)"); // HACK
+		return cover;
+	}
+
+	std::unique_ptr<Wt::WImage>
+	createCover(Database::TrackId trackId, CoverResource::Size size)
+	{
+		auto cover {std::make_unique<Wt::WImage>()};
+		cover->setImageLink(LmsApp->getCoverResource()->getTrackUrl(trackId, size));
+		cover->setStyleClass("Lms-cover img-fluid"); // HACK
+		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)"); // HACK
+		return cover;
+	}
+}

src/lms/ui/Utils.hpp

@@ -22,6 +22,19 @@
 #include <chrono>
 #include <string>
 
-std::string
+#include <Wt/WImage.h>
-durationToString(std::chrono::milliseconds msDuration);
+
+#include "services/database/ReleaseId.hpp"
+#include "services/database/TrackId.hpp"
+
+#include "resource/CoverResource.hpp"
+
+namespace UserInterface::Utils
+{
+	std::string
+	durationToString(std::chrono::milliseconds msDuration);
+
+	std::unique_ptr<Wt::WImage> createCover(Database::ReleaseId releaseId, CoverResource::Size size);
+	std::unique_ptr<Wt::WImage> createCover(Database::TrackId trackId, CoverResource::Size size);
+}
 

src/lms/ui/explore/ReleaseListHelpers.cpp

@@ -25,9 +25,9 @@
 
 #include "services/database/Artist.hpp"
 #include "services/database/Release.hpp"
-#include "resource/CoverResource.hpp"
 
 #include "LmsApplication.hpp"
+#include "Utils.hpp"
 
 using namespace Database;
 
@@ -42,18 +42,18 @@ namespace UserInterface::ReleaseListHelpers
 		entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(release));
 		entry->addFunction("tr", &Wt::WTemplate::Functions::tr);
 
-		Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
+		{
-		auto cover {std::make_unique<Wt::WImage>()};
+			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
-		cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large));
+			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Large)};
-		cover->setStyleClass("Lms-cover rounded");
+			cover->addStyleClass("Lms-cover-release");
-		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
+			anchor->setImage(std::move(cover));
-		anchor->setImage(std::move(cover));
+		}
 
 		auto artists {release->getReleaseArtists()};
 		if (artists.empty())
 			artists = release->getArtists();
 
-		bool isSameArtist {(std::find(std::cbegin(artists), std::cend(artists), artist) != artists.end())};
+		const bool isSameArtist {(std::find(std::cbegin(artists), std::cend(artists), artist) != artists.end())};
 
 		if (artists.size() > 1)
 		{

src/lms/ui/explore/ReleaseView.cpp

@@ -34,13 +34,12 @@
 
 #include "common/Template.hpp"
 #include "resource/DownloadResource.hpp"
-#include "resource/CoverResource.hpp"
 #include "Filters.hpp"
 #include "LmsApplication.hpp"
 #include "LmsApplicationException.hpp"
 #include "MediaPlayer.hpp"
 #include "ReleaseListHelpers.hpp"
-#include "TrackStringUtils.hpp"
+#include "Utils.hpp"
 
 using namespace Database;
 
@@ -127,15 +126,11 @@ Release::refreshView()
 		}
 	}
 
-	bindString("duration", durationToString(release->getDuration()), Wt::TextFormat::Plain);
+	bindString("duration", Utils::durationToString(release->getDuration()), Wt::TextFormat::Plain);
 
 	refreshReleaseArtists(release);
 
-	{
+	bindWidget<Wt::WImage>("cover", Utils::createCover(release->getId(), CoverResource::Size::Large));
-		Wt::WImage* cover {bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large)))};
-		cover->setStyleClass("img-fluid");
-		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
-	}
 
 	Wt::WContainerWidget* clusterContainers {bindNew<Wt::WContainerWidget>("clusters")};
 	{
@@ -319,7 +314,7 @@ Release::refreshView()
 				->setLink(Wt::WLink {std::make_unique<DownloadTrackResource>(trackId)});
 		}
 
-		entry->bindString("duration", durationToString(track->getDuration()), Wt::TextFormat::Plain);
+		entry->bindString("duration", Utils::durationToString(track->getDuration()), Wt::TextFormat::Plain);
 
 		LmsApp->getMediaPlayer().trackLoaded.connect(entry, [=] (TrackId loadedTrackId)
 		{

src/lms/ui/explore/TrackListHelpers.cpp

@@ -38,7 +38,7 @@
 #include "resource/CoverResource.hpp"
 #include "LmsApplication.hpp"
 #include "MediaPlayer.hpp"
-#include "TrackStringUtils.hpp"
+#include "Utils.hpp"
 
 using namespace Database;
 
@@ -60,26 +60,21 @@ namespace UserInterface::TrackListHelpers
 		{
 			entry->setCondition("if-has-release", true);
 			entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease()));
-			{
+			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
-				Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
+			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Small)};
-				auto cover {std::make_unique<Wt::WImage>()};
+			cover->addStyleClass("Lms-cover-track"); // HACK
-				cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large));
+			anchor->setImage(std::move((cover)));
-				cover->setStyleClass("img-fluid");
-				cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
-				anchor->setImage(std::move(cover));
-			}
 		}
 		else
 		{
-			auto* cover {entry->bindNew<Wt::WImage>("cover")};
+			auto cover {Utils::createCover(trackId, CoverResource::Size::Small)};
-			cover->setImageLink(LmsApp->getCoverResource()->getTrackUrl(trackId, CoverResource::Size::Large));
+			cover->addStyleClass("Lms-cover-track"); // HACK
-			cover->setStyleClass("img-fluid");
+			entry->bindWidget<Wt::WImage>("cover", std::move(cover));
-			cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
 		}
 
-		entry->bindString("duration", durationToString(track->getDuration()), Wt::TextFormat::Plain);
+		entry->bindString("duration", Utils::durationToString(track->getDuration()), Wt::TextFormat::Plain);
 
-		Wt::WText* playBtn = entry->bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML);
+		Wt::WText* playBtn {entry->bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
 		playBtn->clicked().connect([trackId, &tracksAction]
 		{
 			tracksAction.emit(PlayQueueAction::Play, {trackId});