From 1743878a14631427a5ecd7be20a1db03c690e945 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Fri, 12 Mar 2021 20:26:45 +0100 Subject: [PATCH] feat: setup tracklist with rest api --- public/js/bundle.js | 75 +++++++++++++++--------------- src/components/pages/Tracklist.vue | 46 +++++++++--------- src/data/artist.js | 11 +---- src/router.js | 45 ++++++++++-------- src/use/favorites.js | 1 - 5 files changed, 88 insertions(+), 90 deletions(-) diff --git a/public/js/bundle.js b/public/js/bundle.js index 10cb28a..61f8ab4 100644 --- a/public/js/bundle.js +++ b/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(); diff --git a/src/components/pages/Tracklist.vue b/src/components/pages/Tracklist.vue index 4fab29f..9734a85 100644 --- a/src/components/pages/Tracklist.vue +++ b/src/components/pages/Tracklist.vue @@ -1,5 +1,5 @@ {{ label }} @@ -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 { } } - diff --git a/src/data/artist.js b/src/data/artist.js index a4a17cd..060bd01 100644 --- a/src/data/artist.js +++ b/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) - }) - }) } diff --git a/src/router.js b/src/router.js index 848a1bf..1dfe3c0 100644 --- a/src/router.js +++ b/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() }) diff --git a/src/use/favorites.js b/src/use/favorites.js index 5cecd0b..685e6f5 100644 --- a/src/use/favorites.js +++ b/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 } }