multiple users separated by comma or spaces accepted in Spotify username field

server/src/routes/api/get/getUserSpotifyPlaylists.ts

@@ -8,8 +8,12 @@ const handler: ApiHandler['handler'] = async (req, res) => {
 
 	if (deemix.plugins.spotify.enabled) {
 		const sp = deemix.plugins.spotify.sp
-		const username = req.query.spotifyUser
+		const usernames = req.query.spotifyUser.split(/[\s,]+/)
 		data = []
+		let playlistList: any
+		playlistList = []
+		for (let username of usernames) {
+			username = username.trim()
 			let playlists
 			try {
 				playlists = await sp.getUserPlaylists(username)
@@ -18,15 +22,16 @@ const handler: ApiHandler['handler'] = async (req, res) => {
 				return
 			}
 			playlists = playlists.body
-		let playlistList = playlists.items
+			playlistList = playlistList.concat(playlists.items)
 			while (playlists.next) {
-			const regExec = /offset=(\d+)&limit=(\d+)/g.exec(playlists.next)
+				const regExec = /offset=(\d+)/g.exec(playlists.next)
 				const offset = regExec![1]
-			const limit = regExec![2]
-			const newPlaylists = await sp.getUserPlaylists(username, { offset, limit })
+				// const limit = regExec![2]
+				const newPlaylists = await sp.getUserPlaylists(username, { offset })
 				playlists = newPlaylists.body
 				playlistList = playlistList.concat(playlists.items)
 			}
+		}
 		playlistList.forEach((playlist: any) => {
 			data.push(deemix.plugins.spotify._convertPlaylistStructure(playlist))
 		})

webui/src/components/pages/About.vue

@@ -37,6 +37,12 @@
 
 		<h2>Changelog</h2>
 		<ul class="no-dots" style="font-size: 15px;">
+			<h3>06/08/2024</h3>
+			- Restored "Spotify Username" field in Settings, Other, Spotify features.<br>
+			- New feature! Added the possibility to insert a list of spotify users instead, separated by commas or spaces.<br>
+			How it works:<br>
+			All the public playlists by the listed users will be displayed in the Favorites section. A user ID is the part that comes after 'https://open.spotify.com/user/' and can be a set of alphanumeric characters or a profile name. You can also insert your own Spotify username as before.<br>
+			<br>
 			<h3>02/08/2024</h3>
 			- Removed outdated linters and formatters<br>
 			- Few fixes in API ts types<br>

webui/src/components/pages/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="home_tab">
 		<h1 class="mb-8 text-5xl">{{ $t('globals.welcome') }}</h1>
-		Version published 02/08/2024, see About section for changelog.
+		Version published 06/08/2024, see About section for changelog.
 		<section v-if="!isLoggedIn" ref="notLogged" class="py-6 border-0 border-t border-solid border-grayscale-500">
 			<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
 			<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">

webui/src/components/pages/InfoSpotifyFeatures.vue

@@ -33,7 +33,9 @@
 			<template #overviewPage>
 				<a href="https://www.spotify.com/it/account/overview/" target="_blank">{{ $t('settings.spotify.howTo.usernameQuestion.step1.overviewPage') }}</a>
 			</template>
-		</i18n> -->
+		</i18n>
+		-->
+		
 	</div>
 </template> 
 

webui/src/components/pages/Settings.vue

@@ -705,17 +705,22 @@
 					<p class="input-group-text">{{ $t('settings.spotify.clientID') }}</p>
 					<input v-model="spotifyFeatures.clientId" type="text" />
 				</div>
-
+				<br>
 				<div class="input-group">
 					<p class="input-group-text">{{ $t('settings.spotify.clientSecret') }}</p>
 					<input v-model="spotifyFeatures.clientSecret" type="password" />
 				</div>
-
-<!-- 				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.spotify.username') }}</p>
+				<br>
+				<div class="input-group">
+					<!-- <p class="input-group-text">{{ $t('settings.spotify.username') }}</p> -->
+					<p class="input-group-text">Spotify Users</p>
+					<p style="font-size: 13px; font-style: italic;">Tip: you can insert here a list of Spotify Users IDs,
+						separated by comma or space. All the public
+						playlists by these users will be displayed in the Favorites section. A user ID is the part that comes after
+						'https://open.spotify.com/user/' and can be a set of alphanumeric characters or a profile name.<br>You can also insert your own Spotify username as before.</p>
 					<input v-model="spotifyUser" type="text" />
-				</div> -->
-
+				</div>
+				<br>
 				<label class="with-checkbox">
 					<input v-model="spotifyFeatures.fallbackSearch" type="checkbox" />
 					<span class="checkbox-text">{{ $t('settings.downloads.fallbackSearch') }}</span>