From 1da05643ba4055c07a642d6f75380a049ec1e2dc Mon Sep 17 00:00:00 2001
From: emeric <emeric.poupon@laposte.net>
Date: Fri, 18 Dec 2020 15:13:31 +0100
Subject: [PATCH] Added '+' button on playqueue. fixes #107

---
 .gitignore               |  2 ++
 approot/artist.xml       |  2 +-
 approot/explore.xml      |  4 ++--
 approot/mediaplayer.xml  | 12 +++++------
 approot/playqueue.xml    | 17 ++++++++--------
 approot/release.xml      | 10 +++++-----
 approot/releases.xml     |  2 +-
 approot/tracks.xml       |  4 ++--
 docroot/css/lms.css      | 11 +++-------
 src/lms/ui/PlayQueue.cpp | 43 +++++++++++++++++++++++++++++++++++-----
 10 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index a03fe99d..761aaa87 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 *.sw?
 *.*~
+CMakeCache.txt
+CMakeFiles/
 build/
diff --git a/approot/artist.xml b/approot/artist.xml
index 301682b6..21f3e7a9 100644
--- a/approot/artist.xml
+++ b/approot/artist.xml
@@ -6,7 +6,7 @@
 	<div class="Lms-header">
 		<h2><div class="Lms-artistname text-primary">${name}</div></h2>
 		${clusters}
-		${play-btn}${more-btn}
+		${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 	</div>
 	<div class="row">
 		${releases class="Lms-explore-artist-entries-container"}
diff --git a/approot/explore.xml b/approot/explore.xml
index a1a84291..ae88ff4b 100644
--- a/approot/explore.xml
+++ b/approot/explore.xml
@@ -5,8 +5,8 @@
 	${contents class="Lms-explore-contents"}
 </message>
 
-<message id="Lms.Explore.template.more-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-btn"></i></message>
-<message id="Lms.Explore.template.play-btn"><i class="fa fa-play-circle Lms-explore-btn Lms-btn"></i></message>
+<message id="Lms.Explore.template.more-btn"><i class="fa fa-fw fa-plus-circle"></i></message>
+<message id="Lms.Explore.template.play-btn"><i class="fa fa-fw fa-play-circle"></i></message>
 
 <message id="Lms.Explore.template.filters">
 	${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"}
diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml
index ba918a7f..f7b70da6 100644
--- a/approot/mediaplayer.xml
+++ b/approot/mediaplayer.xml
@@ -15,18 +15,18 @@
 		</div>
 
 		<div class="row">
-			<div class="col-xs-5 col-sm-2 Lms-player-controls">
-				<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
+			<div class="col-xs-5 col-sm-3 col-md-2 Lms-player-controls">
+				<i id="lms-mp-previous" class="fa fa-fw fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-fw fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-fw fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
 			</div>
-			<div class="hidden-xs col-sm-2">
+			<div class="hidden-xs hidden-sm col-md-2">
 				<div class="Lms-player-volume">
 					<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-btn Lms-player-btn-volume"></i>
-					<span class="hidden-xs Lms-player-volume-slider-container">
+					<span class="Lms-player-volume-slider-container">
 						<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
 					</span>
 				</div>
 			</div>
-			<div class="col-xs-7 col-sm-6">
+			<div class="col-xs-7 col-sm-7 col-md-6">
 				<div class="Lms-player-text-center">
 					${title class="Lms-player-text Lms-trackname text-primary"}
 				</div>
@@ -34,7 +34,7 @@
 					${release class="Lms-btn Lms-player-text Lms-releasename text-primary"}<span class="hidden-xs"><small>${artist class="Lms-btn Lms-player-text Lms-artistname text-muted"}</small></span>
 				</div>
 			</div>
-			<div class="hidden-xs col-sm-2 Lms-player-duration text-muted">
+			<div class="hidden-xs col-sm-2 col-md-2 Lms-player-duration text-muted">
 				<a id="lms-transcoding-active" class="Lms-player-btn Lms-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></a>
 				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
 			</div>
diff --git a/approot/playqueue.xml b/approot/playqueue.xml
index c121fd6a..b1c4424e 100644
--- a/approot/playqueue.xml
+++ b/approot/playqueue.xml
@@ -2,16 +2,16 @@
 <messages xmlns:if="Wt.WTemplate.conditions">
 <!--FORMS message blocks-->
 
-<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
-<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random Lms-playqueue-btn Lms-btn"></i></message>
-<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat Lms-playqueue-btn Lms-btn"></i></message>
-<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle"></i></message>
+<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random"></i></message>
+<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat"></i></message>
+<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss"></i></message>
 
 <message id="Lms.PlayQueue.template">
 	<div class="row">
 		<div class="col-lg-8">
 			<div class="Lms-header">
-				${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn}
+				${clear-btn class="Lms-playqueue-btn Lms-btn"}${shuffle-btn class="Lms-playqueue-btn Lms-btn"}${repeat-btn class="Lms-playqueue-btn Lms-btn"}${radio-btn class="Lms-playqueue-btn Lms-btn"}
 				<h4><small>${nb-tracks}</small></h4>
 			</div>
 			${entries}
@@ -20,8 +20,9 @@
 	</div>
 </message>
 
-<message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-playqueue-btn Lms-btn"></i></message>
-<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle"></i></message>
+<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle"></i></message>
+<message id="Lms.PlayQueue.template.more-btn"><i class="fa fa-fw fa-plus-circle"></i></message>
 
 <message id="Lms.PlayQueue.template.entry">
 	<div class="row Lms-vertical-align Lms-explore-entry-list Lms-playqueue-entry ${is-selected}">
@@ -39,7 +40,7 @@
 		</div>
 		<div class="col-xs-2 col-sm-2 col-md-2">
 			<div class="Lms-playqueue-entry-controls Lms-vertical-align">
-				${play-btn}${del-btn}
+				${play-btn class="Lms-playqueue-btn Lms-btn"}${del-btn class="Lms-playqueue-btn Lms-btn"}<span class="hidden-xs Lms-playqueue-btn Lms-btn">${more-btn}</span>
 			</div>
 			<div class="Lms-playqueue-entry-duration text-muted">
 				${duration}
diff --git a/approot/release.xml b/approot/release.xml
index 1a720e34..ba7e36b3 100644
--- a/approot/release.xml
+++ b/approot/release.xml
@@ -17,7 +17,7 @@
 				${<if-has-artist>}<h4>${artist class="Lms-btn Lms-artistname text-muted"}</h4>${</if-has-artist>}
 				<div class="text-muted"><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></div>
 				${clusters}
-				${play-btn}${more-btn}
+				${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 			</div>
 			${container}
 		</div>
@@ -59,16 +59,16 @@
 
 <message id="Lms.Explore.Release.template.entry">
 	<div class="row Lms-explore-release-entry Lms-entry-hoverable Lms-vertical-align ${is-playing}">
-		<div class="col-xs-1 Lms-explore-release-entry-tracknumber text-muted">
+		<div class="col-sm-1 col-xs-1 Lms-explore-release-entry-tracknumber text-muted">
 			${<if-has-track-number>}${track-number}${</if-has-track-number>}
 		</div>
-		<div class="col-xs-8 Lms-explore-release-entry-name">
+		<div class="col-sm-9 col-xs-7 Lms-explore-release-entry-name">
 			<div class="Lms-trackname text-primary">${name}</div>
 			${<if-has-artists>}${artists}${</if-has-artists>}
 		</div>
-		<div class="col-xs-3">
+		<div class="col-sm-2 col-xs-4">
 			<div class="Lms-explore-release-entry-controls">
-				${play-btn}${more-btn}
+				${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 			</div>
 			<div class="Lms-explore-release-entry-track-duration text-muted">
 				${duration}
diff --git a/approot/releases.xml b/approot/releases.xml
index 091dcd34..65e3cb8a 100644
--- a/approot/releases.xml
+++ b/approot/releases.xml
@@ -5,7 +5,7 @@
 <message id="Lms.Explore.Releases.template">
 	<div class="Lms-header">
 		${mode class="nav nav-pills Lms-explore-mode-container"}
-		${play-btn}${more-btn}
+		${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 	</div>
 	<div class="row">
 		${releases}
diff --git a/approot/tracks.xml b/approot/tracks.xml
index 846b8184..34384ee0 100644
--- a/approot/tracks.xml
+++ b/approot/tracks.xml
@@ -8,7 +8,7 @@
 		<div class="col-lg-8">
 			<div class="Lms-header">
 				${mode class="nav nav-pills Lms-explore-mode-container"}
-				${play-btn}${more-btn}
+				${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 			</div>
 			${tracks}
 			${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
@@ -32,7 +32,7 @@
 			</div>
 			<div class="col-xs-2 col-sm-2 col-md-2">
 				<div class="Lms-explore-tracks-entry-controls">
-					${play-btn}${more-btn}
+					${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
 				</div>
 				<div class="Lms-explore-tracks-entry-duration text-muted">
 					${duration}
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index e0026384..d8020abc 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -112,9 +112,7 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 }
 
 .Lms-explore-btn {
-	font-size: 24px !important;
-	text-align: left;
-	width: 28px;
+	font-size: 24px;
 }
 
 .Lms-explore-clusters {
@@ -185,7 +183,7 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 }
 
 .Lms-explore-release-entry {
-	min-height: 32px;
+	min-height: 34px;
 }
 
 .Lms-explore-release-entry:hover .Lms-explore-release-entry-controls {
@@ -278,8 +276,7 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 }
 
 .Lms-playqueue-btn {
-	font-size: 24px !important;
-	text-align: left;
+	font-size: 24px;
 }
 
 .Lms-playqueue-entry:hover .Lms-playqueue-entry-controls {
@@ -350,8 +347,6 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 
 .Lms-player-btn-controls {
 	font-size: 40px !important;
-	text-align: center;
-	width: 1.1em;
 }
 
 .Lms-player-controls {
diff --git a/src/lms/ui/PlayQueue.cpp b/src/lms/ui/PlayQueue.cpp
index c1bd31f1..9d971ab6 100644
--- a/src/lms/ui/PlayQueue.cpp
+++ b/src/lms/ui/PlayQueue.cpp
@@ -19,7 +19,7 @@
 
 #include "PlayQueue.hpp"
 
-#include <Wt/WText.h>
+#include <Wt/WPopupMenu.h>
 #include <Wt/WText.h>
 
 #include "database/Cluster.hpp"
@@ -35,6 +35,7 @@
 
 #include "common/LoadingIndicator.hpp"
 #include "resource/CoverResource.hpp"
+#include "resource/DownloadResource.hpp"
 #include "LmsApplication.hpp"
 #include "MediaPlayer.hpp"
 #include "TrackStringUtils.hpp"
@@ -414,6 +415,7 @@ PlayQueue::addSome()
 	{
 		const auto tracklistEntryId {tracklistEntry.id()};
 		const auto track {tracklistEntry->getTrack()};
+		const Database::IdType trackId {track->id()};
 
 		Wt::WTemplate* entry = _entriesContainer->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.PlayQueue.template.entry"));
 
@@ -459,7 +461,7 @@ PlayQueue::addSome()
 
 		entry->bindString("duration", trackDurationToString(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);
+		Wt::WText* playBtn {entry->bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.PlayQueue.template.play-btn"), Wt::TextFormat::XHTML)};
 		playBtn->clicked().connect(std::bind([=]
 		{
 			auto pos = _entriesContainer->indexOf(entry);
@@ -467,8 +469,8 @@ PlayQueue::addSome()
 				loadTrack(pos, true);
 		}));
 
-		Wt::WText* delBtn = entry->bindNew<Wt::WText>("del-btn", Wt::WString::tr("Lms.PlayQueue.template.delete-btn"), Wt::TextFormat::XHTML);
-		delBtn->clicked().connect(std::bind([=]
+		Wt::WText* delBtn {entry->bindNew<Wt::WText>("del-btn", Wt::WString::tr("Lms.PlayQueue.template.delete-btn"), Wt::TextFormat::XHTML)};
+		delBtn->clicked().connect([=]
 		{
 			// Remove the entry n both the widget tree and the playqueue
 			{
@@ -488,8 +490,39 @@ PlayQueue::addSome()
 			_entriesContainer->removeWidget(entry);
 
 			updateInfo();
-		}));
+		});
 
+		Wt::WText* moreBtn {entry->bindNew<Wt::WText>("more-btn", Wt::WString::tr("Lms.PlayQueue.template.more-btn"), Wt::TextFormat::XHTML)};
+		moreBtn->clicked().connect([=]
+		{
+			Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};
+
+			bool isStarred {};
+			{
+				auto transaction {LmsApp->getDbSession().createSharedTransaction()};
+
+				if (auto track {Database::Track::getById(LmsApp->getDbSession(), trackId)})
+					isStarred = LmsApp->getUser()->hasStarredTrack(track);
+			}
+			popup->addItem(Wt::WString::tr(isStarred ? "Lms.Explore.unstar" : "Lms.Explore.star"))
+				->triggered().connect(moreBtn, [=]
+					{
+						auto transaction {LmsApp->getDbSession().createUniqueTransaction()};
+
+						auto track {Database::Track::getById(LmsApp->getDbSession(), trackId)};
+						if (!track)
+							return;
+
+						if (isStarred)
+							LmsApp->getUser().modify()->unstarTrack(track);
+						else
+							LmsApp->getUser().modify()->starTrack(track);
+					});
+			popup->addItem(Wt::WString::tr("Lms.Explore.download"))
+				->setLink(Wt::WLink {std::make_unique<DownloadTrackResource>(trackId)});
+
+			popup->popup(moreBtn);
+		});
 	}
 
 	if (static_cast<std::size_t>(_entriesContainer->count()) < tracklist->getCount())