Replaced show-more button by infinite scrolling. fixes #83

epoupon · Jul 24, 2020 · 36ccd62 · 36ccd62
1 parent 7de4232
commit 36ccd62
Show file tree

Hide file tree

Showing 20 changed files with 124 additions and 51 deletions.
diff --git a/approot/artists.xml b/approot/artists.xml
@@ -13,9 +13,7 @@
 		</div>
 	</div>
 	${artists}
-	<div class="Lms-horizontal-center">
-		${show-more class="btn-primary Lms-show-more"}
-	</div>
+	${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
 </message>
 
 <message id="Lms.Explore.Artists.template.entry">

diff --git a/approot/messages.xml b/approot/messages.xml
@@ -9,6 +9,7 @@
 <message id="Lms.discard">Discard</message>
 <message id="Lms.cancel">Cancel</message>
 <message id="Lms.create">Create</message>
+<message id="Lms.loading">Loading...</message>
 <message id="Lms.login">Login</message>
 <message id="Lms.logout"><i class="fa fa-fw fa-sign-out" aria-hidden="true"></i> Logout</message>
 <message id="Lms.not-a-directory">Not a directory</message>
@@ -117,7 +118,6 @@
 <message id="Lms.Explore.recently-added">Recently added</message>
 <message id="Lms.Explore.recently-played">Recently played</message>
 <message id="Lms.Explore.releases">Albums</message>
-<message id="Lms.Explore.show-more">Show more</message>
 <message id="Lms.Explore.tracks">Tracks</message>
 <message id="Lms.Explore.type">Type</message>
 <message id="Lms.Explore.value">Value</message>

diff --git a/approot/messages_fr.xml b/approot/messages_fr.xml
@@ -9,6 +9,7 @@
 <message id="Lms.discard">Annuler</message>
 <message id="Lms.cancel">Annuler</message>
 <message id="Lms.create">Créer</message>
+<message id="Lms.loading">Chargement...</message>
 <message id="Lms.login">Login</message>
 <message id="Lms.logout"><i class="fa fa-fw fa-sign-out" aria-hidden="true"></i> Quitter</message>
 <message id="Lms.not-a-directory">N'est pas un répertoire</message>
@@ -117,7 +118,6 @@
 <message id="Lms.Explore.recently-added">Ajoutés récemment</message>
 <message id="Lms.Explore.recently-played">Joués récemment</message>
 <message id="Lms.Explore.releases">Albums</message>
-<message id="Lms.Explore.show-more">Voir plus</message>
 <message id="Lms.Explore.tracks">Pistes</message>
 <message id="Lms.Explore.type">Type</message>
 <message id="Lms.Explore.value">Valeur</message>

diff --git a/approot/playqueue.xml b/approot/playqueue.xml
@@ -16,9 +16,7 @@
 				<h4><small>${nb-tracks}</small></h4>
 			</div>
 			${entries}
-			<div class="Lms-horizontal-center">
-				${show-more class="btn-primary Lms-show-more"}
-			</div>
+			${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
 		</div>
 	</div>
 </message>

diff --git a/approot/releases.xml b/approot/releases.xml
@@ -11,9 +11,7 @@
 	<div class="row">
 		${releases}
 	</div>
-	<div class="Lms-horizontal-center">
-		${show-more class="btn-primary Lms-show-more"}
-	</div>
+	${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
 </message>
 
 <message id="Lms.Explore.Releases.template.entry-grid">

diff --git a/approot/templates.xml b/approot/templates.xml
@@ -56,4 +56,9 @@
 	${player class="Lms-player"}
 </message>
 
+<message id="Lms.LoadingIndicator.template">
+	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+	<span class="sr-only">${tr:Lms.loading}</span>
+</message>
+
 </messages>
diff --git a/approot/tracks.xml b/approot/tracks.xml
@@ -12,9 +12,7 @@
 				${play-btn}${add-btn}
 			</div>
 			${tracks}
-			<div class="Lms-horizontal-center">
-				${show-more class="btn-primary Lms-show-more"}
-			</div>
+			${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
 		</div>
 	</div>
 </message>

diff --git a/docroot/css/lms.css b/docroot/css/lms.css
@@ -259,6 +259,11 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	justify-content: center;
 }
 
+.Lms-loading-indicator {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
 .Lms-navbar-search {
 	max-width: 175px;
 	padding-top: 7.5px;
@@ -478,9 +483,4 @@ a.Lms-releasename:hover, a.Lms-releasename:focus {
 	padding-bottom: 100%;
 }
 
-.Lms-show-more {
-	margin-top: 8px;
-	margin-bottom: 8px;
-}
-
 
diff --git a/src/lms/CMakeLists.txt b/src/lms/CMakeLists.txt
@@ -15,6 +15,7 @@ add_executable(lms
 	ui/admin/UserView.cpp
 	ui/admin/UsersView.cpp
 	ui/common/AuthModeModel.cpp
+	ui/common/LoadingIndicator.cpp
 	ui/common/Validators.cpp
 	ui/explore/ArtistListHelpers.cpp
 	ui/explore/ArtistView.cpp

diff --git a/src/lms/ui/LmsApplication.cpp b/src/lms/ui/LmsApplication.cpp
@@ -22,6 +22,7 @@
 #include <Wt/WAnchor.h>
 #include <Wt/WEnvironment.h>
 #include <Wt/WLineEdit.h>
+#include <Wt/WPushButton.h>
 #include <Wt/WServer.h>
 #include <Wt/WStackedWidget.h>
 #include <Wt/WText.h>

diff --git a/src/lms/ui/PlayQueue.cpp b/src/lms/ui/PlayQueue.cpp
@@ -32,6 +32,7 @@
 #include "utils/Service.hpp"
 #include "utils/String.hpp"
 
+#include "common/LoadingIndicator.hpp"
 #include "resource/ImageResource.hpp"
 #include "LmsApplication.hpp"
 #include "MediaPlayer.hpp"
@@ -66,10 +67,12 @@ PlayQueue::PlayQueue()
 
 	_entriesContainer = bindNew<Wt::WContainerWidget>("entries");
 
-	_showMore = bindNew<Wt::WPushButton>("show-more", Wt::WString::tr("Lms.Explore.show-more"));
-	_showMore->setHidden(true);
-	_showMore->clicked().connect([=]
+	_loadingIndicator = bindWidget<Wt::WTemplate>("loading-indicator", createLoadingIndicator());
+	_loadingIndicator->scrollVisibilityChanged().connect([this](bool visible)
 	{
+		if (!visible)
+			return;
+
 		addSome();
 		updateCurrentTrack(true);
 	});
@@ -202,7 +205,7 @@ PlayQueue::clearTracks()
 		getTrackList().modify()->clear();
 	}
 
-	_showMore->setHidden(true);
+	_loadingIndicator->setHidden(true);
 	_entriesContainer->clear();
 	updateInfo();
 }
@@ -447,7 +450,7 @@ PlayQueue::addSome()
 
 	}
 
-	_showMore->setHidden(static_cast<std::size_t>(_entriesContainer->count()) >= tracklist->getCount());
+	_loadingIndicator->setHidden(static_cast<std::size_t>(_entriesContainer->count()) >= tracklist->getCount());
 }
 
 void

diff --git a/src/lms/ui/PlayQueue.hpp b/src/lms/ui/PlayQueue.hpp
@@ -22,7 +22,6 @@
 #include <optional>
 
 #include <Wt/WContainerWidget.h>
-#include <Wt/WPushButton.h>
 #include <Wt/WTemplate.h>
 #include <Wt/WText.h>
 
@@ -84,7 +83,7 @@ class PlayQueue : public Wt::WTemplate
 		bool _mediaPlayerSettingsLoaded {};
 		Database::IdType _tracklistId {};
 		Wt::WContainerWidget* _entriesContainer {};
-		Wt::WPushButton* _showMore {};
+		Wt::WTemplate* _loadingIndicator {};
 		Wt::WText* _nbTracks {};
 		Wt::WText* _repeatBtn {};
 		Wt::WText* _radioBtn {};

diff --git a/src/lms/ui/common/LoadingIndicator.cpp b/src/lms/ui/common/LoadingIndicator.cpp
@@ -0,0 +1,36 @@
+/*
+ * 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 "LoadingIndicator.hpp"
+
+namespace UserInterface
+{
+	std::unique_ptr<Wt::WTemplate>
+	createLoadingIndicator()
+	{
+		auto res {std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.LoadingIndicator.template"))};
+
+		res->addFunction("tr", &Wt::WTemplate::Functions::tr);
+		res->setScrollVisibilityMargin(200);
+		res->setScrollVisibilityEnabled(true);
+
+		return res;
+	}
+}
+
diff --git a/src/lms/ui/common/LoadingIndicator.hpp b/src/lms/ui/common/LoadingIndicator.hpp
@@ -0,0 +1,28 @@
+/*
+ * 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 <Wt/WTemplate.h>
+
+namespace UserInterface
+{
+	std::unique_ptr<Wt::WTemplate> createLoadingIndicator();
+}
+
diff --git a/src/lms/ui/explore/ArtistsView.cpp b/src/lms/ui/explore/ArtistsView.cpp
@@ -29,6 +29,7 @@
 #include "database/TrackList.hpp"
 #include "utils/Logger.hpp"
 
+#include "common/LoadingIndicator.hpp"
 #include "ArtistListHelpers.hpp"
 #include "LmsApplication.hpp"
 #include "Filters.hpp"
@@ -76,9 +77,12 @@ Artists::Artists(Filters* filters)
 
 	_container = bindNew<Wt::WContainerWidget>("artists");
 
-	_showMore = bindNew<Wt::WPushButton>("show-more", Wt::WString::tr("Lms.Explore.show-more"));
-	_showMore->clicked().connect([=]
+	_loadingIndicator = bindWidget<Wt::WTemplate>("loading-indicator", createLoadingIndicator());
+	_loadingIndicator->scrollVisibilityChanged().connect([this](bool visible)
 	{
+		if (!visible)
+			return;
+
 		addSome();
 	});
 
@@ -203,7 +207,7 @@ Artists::addSome()
 		_container->addWidget(ArtistListHelpers::createEntry(artist));
 	}
 
-	_showMore->setHidden(!moreResults);
+	_loadingIndicator->setHidden(!moreResults);
 }
 
 } // namespace UserInterface

diff --git a/src/lms/ui/explore/ArtistsView.hpp b/src/lms/ui/explore/ArtistsView.hpp
@@ -24,9 +24,7 @@
 
 #include <Wt/WComboBox.h>
 #include <Wt/WContainerWidget.h>
-#include <Wt/WPushButton.h>
 #include <Wt/WTemplate.h>
-#include <Wt/WSignal.h>
 
 #include "database/Types.hpp"
 
@@ -67,15 +65,15 @@ class Artists : public Wt::WTemplate
 		{
 			{Mode::Random, batchSize * 4},
 			{Mode::RecentlyPlayed, batchSize * 4},
-			{Mode::RecentlyAdded, batchSize * 2},
-			{Mode::MostPlayed, batchSize * 2},
+			{Mode::RecentlyAdded, batchSize * 4},
+			{Mode::MostPlayed, batchSize * 4},
 			{Mode::All, batchSize * 50},
 		};
 
 		Mode _mode {defaultMode};
 		std::vector<Database::IdType> _randomArtists;
 		Filters* _filters {};
-		Wt::WPushButton* _showMore {};
+		Wt::WTemplate* _loadingIndicator {};
 		Wt::WContainerWidget* _container {};
 		Wt::WComboBox* _linkType {};
 };

diff --git a/src/lms/ui/explore/ReleasesView.cpp b/src/lms/ui/explore/ReleasesView.cpp
@@ -32,6 +32,7 @@
 #include "utils/Logger.hpp"
 #include "utils/String.hpp"
 
+#include "common/LoadingIndicator.hpp"
 #include "resource/ImageResource.hpp"
 #include "ReleaseListHelpers.hpp"
 #include "Filters.hpp"
@@ -79,9 +80,12 @@ _filters {filters}
 
 	_container = bindNew<Wt::WContainerWidget>("releases");
 
-	_showMore = bindNew<Wt::WPushButton>("show-more", Wt::WString::tr("Lms.Explore.show-more"));
-	_showMore->clicked().connect([this]
+	_loadingIndicator = bindWidget<Wt::WTemplate>("loading-indicator", createLoadingIndicator());
+	_loadingIndicator->scrollVisibilityChanged().connect([this](bool visible)
 	{
+		if (!visible)
+			return;
+
 		addSome();
 	});
 
@@ -118,7 +122,7 @@ Releases::addSome()
 		_container->addWidget(ReleaseListHelpers::createEntry(release));
 	}
 
-	_showMore->setHidden(!moreResults);
+	_loadingIndicator->setHidden(!moreResults);
 }
 
 std::vector<Database::Release::pointer>

diff --git a/src/lms/ui/explore/ReleasesView.hpp b/src/lms/ui/explore/ReleasesView.hpp
@@ -22,7 +22,6 @@
 #include <optional>
 
 #include <Wt/WContainerWidget.h>
-#include <Wt/WPushButton.h>
 #include <Wt/WTemplate.h>
 
 #include "database/Types.hpp"
@@ -57,27 +56,29 @@ class Releases : public Wt::WTemplate
 
 		void refreshView();
 		void refreshView(Mode mode);
+
 		void addSome();
 		std::vector<Wt::Dbo::ptr<Database::Release>> getReleases(std::optional<Database::Range> range, bool& moreResults);
 		std::vector<Wt::Dbo::ptr<Database::Release>> getRandomReleases(std::optional<Database::Range> range, bool& moreResults);
 		std::vector<Database::IdType> getAllReleases();
 
 		static constexpr Mode defaultMode {Mode::Random};
-		static constexpr std::size_t batchSize {18};
+		static constexpr std::size_t maxItemsPerLine {6};
+		static constexpr std::size_t batchSize {maxItemsPerLine * 3};
 		static inline std::unordered_map<Mode, std::optional<std::size_t>> maxItemsPerMode
 		{
-			{Mode::Random, batchSize * 6},
-			{Mode::RecentlyPlayed, batchSize * 3},
-			{Mode::RecentlyAdded, batchSize * 2},
-			{Mode::MostPlayed, batchSize * 2},
+			{Mode::Random, batchSize * 10},
+			{Mode::RecentlyPlayed, batchSize * 10},
+			{Mode::RecentlyAdded, batchSize * 10},
+			{Mode::MostPlayed, batchSize * 10},
 			{Mode::All, batchSize * 30},
 		};
 
 		Mode _mode {defaultMode};
 		Filters* _filters {};
 		std::vector<Database::IdType> _randomReleases;
 		Wt::WContainerWidget* _container {};
-		Wt::WPushButton* _showMore {};
+		Wt::WTemplate* _loadingIndicator {};
 };
 
 } // namespace UserInterface