Added spotify playlists in the playlist tab

public/index.html

@@ -376,7 +376,7 @@ <h1>Favorites</h1>
 							<div v-if="playlists.length == 0">
 								<h1>No Playlists found</h1>
 							</div>
-							<div class="release_grid" v-if="playlists.length > 0">
+							<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
 								<div v-for="release in playlists" class="release clickable" @click="playlistView"
 									:data-id="release.id">
 									<div class="cover_container">
@@ -388,6 +388,17 @@ <h1>No Playlists found</h1>
 									<p class="primary-text">{{ release.title }}</p>
 									<p class="secondary-text">{{ 'by '+release.creator.name+' - '+release.nb_tracks+' tracks' }}</p>
 								</div>
+								<div v-for="release in spotifyPlaylists" class="release clickable" @click="spotifyPlaylistView"
+									:data-id="release.id">
+									<div class="cover_container">
+										<img class="rounded coverart" :src="release.picture_medium">
+										<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+											@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+												class="material-icons">get_app</i></div>
+									</div>
+									<p class="primary-text">{{ release.title }}</p>
+									<p class="secondary-text">{{ 'by '+release.creator.name+' - '+release.nb_tracks+' tracks' }}</p>
+								</div>
 							</div>
 						</div>
 						<div id="album_favorites" class="favorites_tabcontent">
@@ -783,6 +794,10 @@ <h3>Album covers</h3>
 								<p>Spotify Client Secret</p>
 								<input type="password" v-model="spotifyFeatures.clientSecret">
 							</div>
+							<div>
+								<p>Spotify username</p>
+								<input type="text" v-model="spotifyUser">
+							</div>
 						</div>
 						<footer>
 							<button @click="resetSettings">Reset to Default</button>
@@ -859,27 +874,43 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 								</tr>
 							</thead>
 							<tbody>
-								<template v-for="track in body">
-									<tr v-if="track.type == 'track'">
+								<template v-if="type!='Spotify Playlist'">
+									<template v-for="track in body">
+										<tr v-if="track.type == 'track'">
+											<td><i @click=playPausePreview
+													:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
+													:data-preview="track.preview">play_arrow</i></td>
+											<td>{{ track.track_position }}</td>
+											<td class="inline-flex"><i v-if="track.explicit_lyrics"
+													class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
+											</td>
+											<td class="clickable" @click="artistView" :data-id="track.artist.id">
+												{{ track.artist.name }}</td>
+											<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
+												{{ track.album.title }}</td>
+											<td>{{ convertDuration(track.duration) }}</td>
+											<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
+										</tr>
+										<tr v-else-if="track.type == 'disc_separator'">
+											<td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }}</td>
+										</tr>
+									</template>
+								</template>
+								<template v-else>
+									<tr v-for="(track, i) in body">
 										<td><i @click=playPausePreview
-												:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
-												:data-preview="track.preview">play_arrow</i></td>
-										<td>{{ track.track_position }}</td>
-										<td class="inline-flex"><i v-if="track.explicit_lyrics"
-												class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
+												:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
+												:data-preview="track.preview_url">play_arrow</i></td>
+										<td>{{ i+1 }}</td>
+										<td class="inline-flex"><i v-if="track.explicit"
+												class="material-icons">explicit</i>{{ track.name }}
 										</td>
-										<td class="clickable" @click="artistView" :data-id="track.artist.id">
-											{{ track.artist.name }}</td>
-										<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
-											{{ track.album.title }}</td>
-										<td>{{ convertDuration(track.duration) }}</td>
+										<td>{{ track.artists[0].name }}</td>
+										<td>{{ track.album.name }}</td>
+										<td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td>
 										<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
 									</tr>
-									<tr v-else-if="track.type == 'disc_separator'">
-										<td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }}</td>
-									</tr>
 								</template>
-
 							</tbody>
 						</table>
 						<span v-if="label"

public/js/app.js

@@ -99,7 +99,10 @@ function startApp() {
 	if ('true' === localStorage.getItem('slimDownloads')) {
 		document.getElementById("download_list").classList.add("slim")
 	}
-
+	let spotifyUser = localStorage.getItem('spotifyUser')
+	if (spotifyUser != ''){
+		socket.emit('update_userSpotifyPlaylists', spotifyUser)
+	}
 	// Open default tab
 	document.getElementById('main_home_tablink').click()
 }

public/js/modules/components/favorites-tab.js

@@ -1,5 +1,5 @@
 import { socket } from '../socket.js'
-import { playlistView, artistView, albumView } from '../tabs.js'
+import { playlistView, artistView, albumView, spotifyPlaylistView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -11,13 +11,15 @@ const FavoritesTab = new Vue({
 			tracks: [],
 			albums: [],
 			artists: [],
-			playlists: []
+			playlists: [],
+			spotifyPlaylists: []
 		}
 	},
 	methods: {
 		playlistView,
 		artistView,
 		albumView,
+		spotifyPlaylistView,
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
@@ -29,6 +31,11 @@ const FavoritesTab = new Vue({
 		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
+		updated_userSpotifyPlaylists(data){this.spotifyPlaylists = data},
+		updated_userPlaylists(data){this.playlists = data},
+		updated_userAlbums(data){this.albums = data},
+		updated_userArtist(data){this.artists = data},
+		updated_userTracks(data){this.tracks = data},
 		initFavorites(data) {
 			this.tracks = data.tracks
 			this.albums = data.albums
@@ -39,6 +46,11 @@ const FavoritesTab = new Vue({
 	},
 	mounted() {
 		socket.on('init_favorites', this.initFavorites)
+		socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
+		socket.on('updated_userPlaylists', this.updated_userPlaylists)
+		socket.on('updated_userAlbums', this.updated_userAlbums)
+		socket.on('updated_userArtist', this.updated_userArtist)
+		socket.on('updated_userTracks', this.updated_userTracks)
 	}
 }).$mount('#favorites_tab')
 

public/js/modules/components/settings-tab.js

@@ -5,9 +5,11 @@ const SettingsTab = new Vue({
 	data: () => ({
 		settings: { tags: {} },
 		lastSettings: {},
-		lastCredentials: {},
 		spotifyFeatures: {},
-		defaultSettings: {}
+		lastCredentials: {},
+		defaultSettings: {},
+		lastUser: '',
+		spotifyUser: ''
 	}),
 	computed: {
 		darkMode: {
@@ -47,7 +49,14 @@ const SettingsTab = new Vue({
 		saveSettings() {
 			this.lastSettings = { ...SettingsTab.settings }
 			this.lastCredentials = { ...SettingsTab.spotifyFeatures }
-			socket.emit('saveSettings', this.lastSettings, this.lastCredentials)
+			let changed = false
+			if (this.lastUser != this.spotifyUser){
+				// force cloning without linking
+				this.lastUser = (' ' + this.spotifyUser).slice(1)
+				localStorage.setItem('spotifyUser', this.lastUser)
+				changed = true
+			}
+			socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
 		},
 		loadSettings(settings, spotifyCredentials, defaults = null) {
 			if (defaults) this.defaultSettings = { ...defaults }
@@ -80,6 +89,11 @@ const SettingsTab = new Vue({
 	mounted() {
 		socket.on('init_settings', this.initSettings)
 		socket.on('updateSettings', this.updateSettings)
+		let spotyUser = localStorage.getItem('spotifyUser')
+		if (spotyUser){
+			this.lastUser = spotyUser
+			this.spotifyUser = spotyUser
+		}
 	}
 }).$mount('#settings_tab')
 

public/js/modules/components/tracklist-tab.js

@@ -50,7 +50,7 @@ const TracklistTab = new Vue({
 			var selected = []
 			if (this.body) {
 				this.body.forEach(item => {
-					if (item.type == 'track' && item.selected) selected.push(item.link)
+					if (item.type == 'track' && item.selected) selected.push(this.type == "Spotify Playlist" ? item.uri : item.link)
 				})
 			}
 			return selected.join(';')
@@ -110,11 +110,33 @@ const TracklistTab = new Vue({
 			} else {
 				this.body = data.tracks
 			}
+		},
+		showSpotifyPlaylist(data) {
+			this.type = 'Spotify Playlist'
+			this.link = data.uri
+			this.title = data.name
+			this.image = data.images.length ? data.images[0].url : "https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg"
+			this.release_date = ""
+			this.metadata = `by ${data.owner.display_name} • ${data.tracks.length} songs`
+			this.head = [
+				{ title: '<i class="material-icons">music_note</i>', width: '24px' },
+				{ title: '#' },
+				{ title: 'Song' },
+				{ title: 'Artist' },
+				{ title: 'Album' },
+				{ title: '<i class="material-icons">timer</i>', width: '40px' }
+			]
+			if (_.isEmpty(data.tracks)) {
+				this.body = null
+			} else {
+				this.body = data.tracks
+			}
 		}
 	},
 	mounted() {
 		socket.on('show_album', this.showAlbum)
 		socket.on('show_playlist', this.showPlaylist)
+		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
 	}
 }).$mount('#tracklist_tab')
 

public/js/modules/tabs.js

@@ -47,6 +47,13 @@ export function playlistView(ev) {
 	showTab('playlist', id)
 }
 
+export function spotifyPlaylistView(ev) {
+	let id = ev.currentTarget.dataset.id
+	TracklistTab.reset()
+	socket.emit('getTracklist', { type: 'spotifyplaylist', id: id })
+	showTab('spotifyplaylist', id)
+}
+
 function analyzeLink(link) {
 	console.log('Analyzing: ' + link)
 	LinkAnalyzerTab.reset()
@@ -169,6 +176,8 @@ function changeTab(sidebarEl, section, tabName) {
 	}
 	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
 		SettingsTab.settings = { ...SettingsTab.lastSettings }
+		SettingsTab.spotifyCredentials = { ...SettingsTab.lastCredentials }
+		SettingsTab.spotifyUser = (' ' + SettingsTab.lastUser).slice(1)
 	}
 
 	document.getElementById(tabName).style.display = 'block'