feat: setup tracklist with rest api

public/js/bundle.js

@@ -34602,16 +34602,9 @@ function formatArtistReleases(artistReleases) {
 }
 
 function getArtistData(artistID) {
-	socket.emit('getTracklist', {
+	return fetchData('getTracklist', {
 		type: 'artist',
 		id: artistID
-	});
-
-	return new Promise((resolve, reject) => {
-		socket.on('show_artist', data => {
-			socket.off('show_artist');
-			resolve(data);
-		});
 	})
 }
 
@@ -36296,7 +36289,6 @@ async function refreshFavorites({ isInitial = false }) {
 		const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', {
 			spotifyUser: store.getters.getSpotifyUser.id
 		});
-		console.log({ spotifyPlaylists });
 		favoriteSpotifyPlaylists.value = spotifyPlaylists;
 	}
 }
@@ -45530,9 +45522,9 @@ var script$t = {
 		}
 	},
 	mounted() {
-		socket.on('show_album', this.showAlbum);
-		socket.on('show_playlist', this.showPlaylist);
-		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist);
+		EventBus.$on('showAlbum', this.showAlbum);
+		EventBus.$on('showPlaylist', this.showPlaylist);
+		EventBus.$on('showSpotifyPlaylist', this.showSpotifyPlaylist);
 	},
 	methods: {
 		playPausePreview,
@@ -45551,17 +45543,17 @@ var script$t = {
 		},
 		toggleAll(e) {
 			this.body.forEach(item => {
-				if (item.type == 'track') {
+				if (item.type === 'track') {
 					item.selected = e.currentTarget.checked;
 				}
 			});
 		},
 		selectedLinks() {
-			var selected = [];
+			const selected = [];
 			if (this.body) {
 				this.body.forEach(item => {
-					if (item.type == 'track' && item.selected)
-						selected.push(this.type == 'spotifyPlaylist' ? item.uri : item.link);
+					if (item.type === 'track' && item.selected)
+						selected.push(this.type === 'spotifyPlaylist' ? item.uri : item.link);
 				});
 			}
 			return selected.join(';')
@@ -45875,11 +45867,11 @@ var __vue_render__$v = function() {
                                   staticClass:
                                     "table__cell--medium table__cell--center clickable",
                                   attrs: {
-                                    tag: "td",
                                     to: {
                                       name: "Artist",
                                       params: { id: track.artist.id }
-                                    }
+                                    },
+                                    tag: "td"
                                   }
                                 },
                                 [
@@ -45898,11 +45890,11 @@ var __vue_render__$v = function() {
                                       staticClass:
                                         "table__cell--medium table__cell--center clickable",
                                       attrs: {
-                                        tag: "td",
                                         to: {
                                           name: "Album",
                                           params: { id: track.album.id }
-                                        }
+                                        },
+                                        tag: "td"
                                       }
                                     },
                                     [
@@ -46375,38 +46367,45 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
-	let getTracklistParams = null;
-
 	switch (to.name) {
-		case 'Tracklist':
-			getTracklistParams = {
-				type: to.params.type,
-				id: to.params.id
-			};
+		case 'Tracklist': {
+			// const getTracklistParams = {
+			// 	type: to.params.type,
+			// 	id: to.params.id
+			// }
+			console.warn('This should never happen.');
 			break
-		case 'Album':
-			getTracklistParams = {
+		}
+		case 'Album': {
+			const getTracklistParams = {
 				type: 'album',
 				id: to.params.id
 			};
+			fetchData('getTracklist', getTracklistParams).then(albumData => {
+				EventBus.$emit('showAlbum', albumData);
+			});
 			break
-		case 'Playlist':
-			getTracklistParams = {
+		}
+		case 'Playlist': {
+			const getTracklistParams = {
 				type: 'playlist',
 				id: to.params.id
 			};
+			fetchData('getTracklist', getTracklistParams).then(playlistData => {
+				EventBus.$emit('showPlaylist', playlistData);
+			});
 			break
-		case 'Spotify Playlist':
-			getTracklistParams = {
+		}
+		case 'Spotify Playlist': {
+			const getTracklistParams = {
 				type: 'spotifyplaylist',
 				id: to.params.id
 			};
+			fetchData('getTracklist', getTracklistParams).then(spotifyPlaylistData => {
+				EventBus.$emit('showSpotifyPlaylist', spotifyPlaylistData);
+			});
 			break
-	}
-
-	if (getTracklistParams) {
-		socket.emit('getTracklist', getTracklistParams);
-		fetchData('getTracklist', getTracklistParams);
+		}
 	}
 
 	next();

src/components/pages/Tracklist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative fixed-footer bg-background-main image-header" ref="root">
+	<div ref="root" class="relative fixed-footer bg-background-main image-header">
 		<header
 			:style="{
 				'background-image':
@@ -30,7 +30,7 @@
 						<i class="material-icons">timer</i>
 					</th>
 					<th class="table__icon table__cell--center clickable">
-						<input @click="toggleAll" class="selectAll" type="checkbox" />
+						<input class="selectAll" type="checkbox" @click="toggleAll" />
 					</th>
 				</tr>
 			</thead>
@@ -41,15 +41,15 @@
 							<td class="table__cell--x-small table__cell--center">
 								<div class="table__cell-content table__cell-content--vertical-center">
 									<i
-										class="material-icons"
+										v-on="{ click: track.preview ? playPausePreview : false }"
 										:class="{
 											preview_playlist_controls: track.preview,
 											'cursor-pointer': track.preview,
 											disabled: !track.preview
 										}"
-										v-on="{ click: track.preview ? playPausePreview : false }"
 										:data-preview="track.preview"
 										:title="$t('globals.play_hint')"
+										class="material-icons"
 									>
 										play_arrow
 									</i>
@@ -70,28 +70,28 @@
 								</div>
 							</td>
 							<router-link
-								tag="td"
-								class="table__cell--medium table__cell--center clickable"
 								:to="{ name: 'Artist', params: { id: track.artist.id } }"
+								class="table__cell--medium table__cell--center clickable"
+								tag="td"
 							>
 								{{ track.artist.name }}
 							</router-link>
 							<router-link
-								tag="td"
 								v-if="type === 'playlist'"
-								class="table__cell--medium table__cell--center clickable"
 								:to="{ name: 'Album', params: { id: track.album.id } }"
+								class="table__cell--medium table__cell--center clickable"
+								tag="td"
 							>
 								{{ track.album.title }}
 							</router-link>
 							<td
-								class="table__cell--center"
 								:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"
+								class="table__cell--center"
 							>
 								{{ convertDuration(track.duration) }}
 							</td>
 							<td class="table__icon table__cell--center">
-								<input class="clickable" type="checkbox" v-model="track.selected" />
+								<input v-model="track.selected" class="clickable" type="checkbox" />
 							</td>
 						</tr>
 						<tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight" style="opacity: 0.54">
@@ -112,14 +112,14 @@
 						<td>
 							<i
 								v-if="track.preview_url"
-								@click="playPausePreview"
-								class="material-icons"
 								:class="{
 									preview_playlist_controls: track.preview_url,
 									'cursor-pointer': track.preview_url
 								}"
 								:data-preview="track.preview_url"
 								:title="$t('globals.play_hint')"
+								class="material-icons"
+								@click="playPausePreview"
 							>
 								play_arrow
 							</i>
@@ -133,17 +133,17 @@
 						<td>{{ track.artists[0].name }}</td>
 						<td>{{ track.album.name }}</td>
 						<td>{{ convertDuration(Math.floor(track.duration_ms / 1000)) }}</td>
-						<td><input class="clickable" type="checkbox" v-model="track.selected" /></td>
+						<td><input v-model="track.selected" class="clickable" type="checkbox" /></td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
 		<footer class="bg-background-main">
-			<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link">
+			<button :data-link="link" class="mr-2 btn btn-primary" @click.stop="addToQueue">
 				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
 			</button>
-			<button class="flex items-center btn btn-primary" @click.stop="addToQueue" :data-link="selectedLinks()">
+			<button :data-link="selectedLinks()" class="flex items-center btn btn-primary" @click.stop="addToQueue">
 				{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
 			</button>
 		</footer>
@@ -156,6 +156,7 @@ import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
+import EventBus from '@/utils/EventBus'
 
 export default {
 	data() {
@@ -172,9 +173,9 @@ export default {
 		}
 	},
 	mounted() {
-		socket.on('show_album', this.showAlbum)
-		socket.on('show_playlist', this.showPlaylist)
-		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
+		EventBus.$on('showAlbum', this.showAlbum)
+		EventBus.$on('showPlaylist', this.showPlaylist)
+		EventBus.$on('showSpotifyPlaylist', this.showSpotifyPlaylist)
 	},
 	methods: {
 		playPausePreview,
@@ -193,17 +194,17 @@ export default {
 		},
 		toggleAll(e) {
 			this.body.forEach(item => {
-				if (item.type == 'track') {
+				if (item.type === 'track') {
 					item.selected = e.currentTarget.checked
 				}
 			})
 		},
 		selectedLinks() {
-			var selected = []
+			const selected = []
 			if (this.body) {
 				this.body.forEach(item => {
-					if (item.type == 'track' && item.selected)
-						selected.push(this.type == 'spotifyPlaylist' ? item.uri : item.link)
+					if (item.type === 'track' && item.selected)
+						selected.push(this.type === 'spotifyPlaylist' ? item.uri : item.link)
 				})
 			}
 			return selected.join(';')
@@ -305,4 +306,3 @@ export default {
 	}
 }
 </script>
-

src/data/artist.js

@@ -1,5 +1,5 @@
-import { socket } from '@/utils/socket'
 import { getPropertyWithFallback } from '@/utils/utils'
+import { fetchData } from '@/utils/api'
 
 export function formatArtistData(artistData) {
 	return {
@@ -36,15 +36,8 @@ function formatArtistReleases(artistReleases) {
 }
 
 export function getArtistData(artistID) {
-	socket.emit('getTracklist', {
+	return fetchData('getTracklist', {
 		type: 'artist',
 		id: artistID
 	})
-
-	return new Promise((resolve, reject) => {
-		socket.on('show_artist', data => {
-			socket.off('show_artist')
-			resolve(data)
-		})
-	})
 }

src/router.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import { socket } from '@/utils/socket'
 
 // Pages
 //import About from '@components/pages/About.vue'
@@ -16,6 +15,7 @@ import Search from '@components/pages/Search.vue'
 import Settings from '@components/pages/Settings.vue'
 import Tracklist from '@components/pages/Tracklist.vue'
 import { fetchData } from '@/utils/api'
+import EventBus from '@/utils/EventBus'
 
 Vue.use(VueRouter)
 
@@ -126,43 +126,50 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-	let getTracklistParams = null
-
 	switch (to.name) {
-		case 'Tracklist':
-			getTracklistParams = {
-				type: to.params.type,
-				id: to.params.id
-			}
+		case 'Tracklist': {
+			// const getTracklistParams = {
+			// 	type: to.params.type,
+			// 	id: to.params.id
+			// }
+			console.warn('This should never happen.')
 			break
-		case 'Album':
-			getTracklistParams = {
+		}
+		case 'Album': {
+			const getTracklistParams = {
 				type: 'album',
 				id: to.params.id
 			}
+			fetchData('getTracklist', getTracklistParams).then(albumData => {
+				EventBus.$emit('showAlbum', albumData)
+			})
 			break
-		case 'Playlist':
-			getTracklistParams = {
+		}
+		case 'Playlist': {
+			const getTracklistParams = {
 				type: 'playlist',
 				id: to.params.id
 			}
+			fetchData('getTracklist', getTracklistParams).then(playlistData => {
+				EventBus.$emit('showPlaylist', playlistData)
+			})
 			break
-		case 'Spotify Playlist':
-			getTracklistParams = {
+		}
+		case 'Spotify Playlist': {
+			const getTracklistParams = {
 				type: 'spotifyplaylist',
 				id: to.params.id
 			}
+			fetchData('getTracklist', getTracklistParams).then(spotifyPlaylistData => {
+				EventBus.$emit('showSpotifyPlaylist', spotifyPlaylistData)
+			})
 			break
+		}
 
 		default:
 			break
 	}
 
-	if (getTracklistParams) {
-		socket.emit('getTracklist', getTracklistParams)
-		fetchData('getTracklist', getTracklistParams)
-	}
-
 	next()
 })
 

src/use/favorites.js

@@ -30,7 +30,6 @@ async function refreshFavorites({ isInitial = false }) {
 		const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', {
 			spotifyUser: store.getters.getSpotifyUser.id
 		})
-		console.log({ spotifyPlaylists })
 		favoriteSpotifyPlaylists.value = spotifyPlaylists
 	}
 }