From 8d0a18d1edcd7ea42d33c7c8a8c8d8986ab364ae Mon Sep 17 00:00:00 2001
From: emeric <itmfr@yahoo.fr>
Date: Tue, 14 Apr 2020 21:32:44 +0200
Subject: [PATCH] Added covers for the tracks view

---
 approot/tracks.xml                 | 17 ++++++++++++-----
 docroot/css/lms.css                |  8 +++++++-
 src/lms/ui/explore/ReleaseLink.cpp |  2 +-
 src/lms/ui/explore/TracksView.cpp  | 13 +++++++++++++
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/approot/tracks.xml b/approot/tracks.xml
index 199d194f..0890848a 100644
--- a/approot/tracks.xml
+++ b/approot/tracks.xml
@@ -25,11 +25,18 @@
 <message id="Lms.Explore.Tracks.template.entry">
 	<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">
-			<h4><div class="Lms-trackname text-primary">${name}</div></h4>
-			${<if-has-artists-or-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-or-release>}
+			<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>
+					${<if-has-artists-or-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-or-release>}
+				</div>
+			</div>
 		</div>
 		<div class="col-xs-3">
 			<div class="Lms-explore-tracks-entry-controls">
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index 1d56955f..d2b1fbff 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -119,12 +119,18 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	filter: brightness(130%);
 }
 
-.Lms-cover-small {
+.Lms-cover-smaller {
 	width: 64px; /* some cover may not be square */
 	border-radius: 10px;
 	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 {
 	width: 128px;
 	border-radius: 16px;
diff --git a/src/lms/ui/explore/ReleaseLink.cpp b/src/lms/ui/explore/ReleaseLink.cpp
index 56d8b6cc..5f45e2e4 100644
--- a/src/lms/ui/explore/ReleaseLink.cpp
+++ b/src/lms/ui/explore/ReleaseLink.cpp
@@ -40,7 +40,7 @@ ReleaseLink::ReleaseLink(Database::Release::pointer release)
 	Wt::WAnchor* anchor = bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 	auto cover = std::make_unique<Wt::WImage>();
 	cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 64));
-	cover->setStyleClass("Lms-cover-small");
+	cover->setStyleClass("Lms-cover-smaller");
 	anchor->setImage(std::move(cover));
 
 	auto artists = release->getReleaseArtists();
diff --git a/src/lms/ui/explore/TracksView.cpp b/src/lms/ui/explore/TracksView.cpp
index 41bae1e6..14adef53 100644
--- a/src/lms/ui/explore/TracksView.cpp
+++ b/src/lms/ui/explore/TracksView.cpp
@@ -144,6 +144,19 @@ Tracks::addSome()
 		{
 			entry->setCondition("if-has-release", true);
 			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);