Added spotify playlists in the playlist tab

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'