Added track duration in various relevant place in the UI. #15

approot/playqueue.xml

@@ -49,8 +49,13 @@
 			${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
 			${</if-has-artists-or-release>}
 		</div>
-		<div class="col-xs-3 Lms-playqueue-entry-controls">
+		<div class="col-xs-3">
-			${play-btn}${del-btn}
+			<div class="Lms-playqueue-entry-controls">
+				${play-btn}${del-btn}
+			</div>
+			<div class="Lms-playqueue-entry-duration">
+				${duration}
+			</div>
 		</div>
 	</div>
 </message>

approot/release.xml

@@ -31,8 +31,13 @@
 			${name}
 			${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
 		</div>
-		<div class="col-xs-3 Lms-explore-release-entry-controls">
+		<div class="col-xs-3">
-			${play-btn}${add-btn}
+			<div class="Lms-explore-release-entry-controls">
+				${play-btn}${add-btn}
+			</div>
+			<div class="Lms-explore-release-entry-track-duration">
+				${duration}
+			</div>
 		</div>
 	</div>
 </message>

approot/tracks.xml

@@ -31,8 +31,13 @@
 			${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
 			${</if-has-artists-or-release>}
 		</div>
-		<div class="col-xs-3 Lms-explore-tracks-entry-controls">
+		<div class="col-xs-3">
-			${play-btn}${add-btn}
+			<div class="Lms-explore-tracks-entry-controls">
+				${play-btn}${add-btn}
+			</div>
+			<div class="Lms-explore-tracks-entry-duration">
+				${duration}
+			</div>
 		</div>
 	</div>
 </message>

docroot/css/lms.css

@@ -176,19 +176,34 @@ a:hover {
 	margin: 0px;
 }
 
-
 .Lms-explore-release-entry:hover {
 	background-color: lightgrey;
 }
 
+.Lms-explore-release-entry:hover .Lms-explore-release-entry-controls {
+	display: block;
+}
+
+.Lms-explore-release-entry:hover .Lms-explore-release-entry-track-duration {
+	display: none;
+}
+
 .Lms-explore-release-entry-controls {
 	text-align: right;
+	display: none;
 }
 
 .Lms-explore-release-entry-playing {
 	font-weight: bold;
 }
 
+.Lms-explore-release-entry-track-duration {
+	color: darkgrey;
+	text-align: right;
+	white-space: nowrap;
+	display: block;
+}
+
 .Lms-explore-releaselink {
 	margin: 0px;
 	padding-top: 4px;
@@ -253,6 +268,14 @@ a:hover {
 	background-color: lightgrey;
 }
 
+.Lms-explore-tracks-entry:hover .Lms-explore-tracks-entry-controls {
+	display: block;
+}
+
+.Lms-explore-tracks-entry:hover .Lms-explore-tracks-entry-duration {
+	display: none;
+}
+
 .Lms-explore-tracks-entry-name {
 	margin-top: 4px;
 	margin-bottom: 4px;
@@ -260,6 +283,14 @@ a:hover {
 
 .Lms-explore-tracks-entry-controls {
 	text-align: right;
+	display: none;
+}
+
+.Lms-explore-tracks-entry-duration {
+	color: darkgrey;
+	text-align: right;
+	white-space: nowrap;
+	display: block;
 }
 
 .Lms-explore-tracksinfo-entry {
@@ -293,13 +324,12 @@ a:hover {
 	background-color: lightgrey;
 }
 
-.Lms-playqueue-entry-name {
+.Lms-playqueue-entry:hover .Lms-playqueue-entry-controls {
-	margin-top: 4px;
+	display: block;
-	margin-bottom: 4px;
 }
 
-.Lms-playqueue-entry-controls {
+.Lms-playqueue-entry:hover .Lms-playqueue-entry-duration {
-	text-align: right;
+	display: none;
 }
 
 .Lms-playqueue-btn {
@@ -316,6 +346,23 @@ a:hover {
 	color: #337ab7;
 }
 
+.Lms-playqueue-entry-controls {
+	text-align: right;
+	display: none;
+}
+
+.Lms-playqueue-entry-duration {
+	color: darkgrey;
+	text-align: right;
+	white-space: nowrap;
+	display: block;
+}
+
+.Lms-playqueue-entry-name {
+	margin-top: 4px;
+	margin-bottom: 4px;
+}
+
 .Lms-playqueue-selected {
 	font-weight: 800;
 }

src/Makefile.am

@@ -94,6 +94,8 @@ lms_SOURCES = \
 	$(srcdir)/ui/PlayHistoryView.hpp			\
 	$(srcdir)/ui/SettingsView.cpp				\
 	$(srcdir)/ui/SettingsView.hpp				\
+	$(srcdir)/ui/TrackStringUtils.cpp			\
+	$(srcdir)/ui/TrackStringUtils.hpp			\
 	$(srcdir)/ui/admin/DatabaseSettingsView.cpp		\
 	$(srcdir)/ui/admin/DatabaseSettingsView.hpp		\
 	$(srcdir)/ui/admin/DatabaseStatus.cpp			\

src/ui/PlayQueueView.cpp

@@ -30,6 +30,7 @@
 #include "utils/Logger.hpp"
 #include "utils/Service.hpp"
 #include "utils/Utils.hpp"
+#include "TrackStringUtils.hpp"
 #include "LmsApplication.hpp"
 
 namespace UserInterface {
@@ -373,6 +374,8 @@ PlayQueue::addSome()
 			entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease()));
 		}
 
+		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);
 		playBtn->clicked().connect(std::bind([=]
 		{

src/ui/TrackStringUtils.cpp

@@ -0,0 +1,37 @@
+/*
+ * 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
+trackDurationToString(std::chrono::milliseconds	msDuration)
+{
+	const std::chrono::seconds duration {std::chrono::duration_cast<std::chrono::seconds>(msDuration)};
+
+	std::ostringstream oss;
+	oss << std::setfill('0') << std::setw(2) << (duration.count() / 60)
+		<< ":"
+		<< std::setfill('0') << std::setw(2) << duration.count() % 60;
+
+	return oss.str();
+}
+

src/ui/TrackStringUtils.hpp

@@ -0,0 +1,27 @@
+/*
+ * 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/>.
+ */
+
+#pragma once
+
+#include <chrono>
+#include <string>
+
+std::string
+trackDurationToString(std::chrono::milliseconds msDuration);
+

src/ui/explore/ReleaseView.cpp

@@ -33,9 +33,10 @@
 
 #include "resource/ImageResource.hpp"
 
+#include "Filters.hpp"
 #include "LmsApplication.hpp"
 #include "LmsApplicationException.hpp"
-#include "Filters.hpp"
+#include "TrackStringUtils.hpp"
 
 using namespace Database;
 
@@ -203,6 +204,8 @@ Release::refresh()
 			tracksAdd.emit({trackId});
 		}));
 
+		entry->bindString("duration", trackDurationToString(track->getDuration()), Wt::TextFormat::Plain);
+
 		LmsApp->getEvents().trackLoaded.connect(entry, [=] (Database::IdType loadedTrackId, bool /*play*/)
 		{
 			entry->toggleStyleClass("Lms-explore-release-entry-playing", loadedTrackId == trackId);

src/ui/explore/TracksView.cpp

@@ -32,8 +32,9 @@
 
 #include "resource/ImageResource.hpp"
 
-#include "LmsApplication.hpp"
 #include "Filters.hpp"
+#include "LmsApplication.hpp"
+#include "TrackStringUtils.hpp"
 
 using namespace Database;
 
@@ -145,6 +146,8 @@ Tracks::addSome()
 			entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease()));
 		}
 
+		entry->bindString("duration", trackDurationToString(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);
 		playBtn->clicked().connect(std::bind([=]
 		{