add better spotify integ

webui/src/components/TheSidebar.vue

@@ -102,6 +102,10 @@ export default defineComponent({
 	left: 30px;
 }
 
+a[aria-label="spotify home"] i {
+	transform: rotate(-90deg);
+}
+
 .theme_toggler {
 	transition: border 200ms ease-in-out;
 }

webui/src/components/pages/Spotify.vue

@@ -0,0 +1,105 @@
+<template>
+	<div id="spotify_tab" class="image-header">
+		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.spotify') }}</h1>
+
+		spotifyyyy
+
+		monkey
+	</div>
+</template>
+
+<script>
+/* eslint-disable camelcase */
+import { mapGetters } from 'vuex'
+import { convertDuration } from '@/utils/utils'
+import { COUNTRIES } from '@/utils/countries'
+import { sendAddToQueue } from '@/utils/downloads'
+import EventBus from '@/utils/EventBus'
+
+export default {
+	data() {
+		return {
+			link: '',
+			title: '',
+			subtitle: '',
+			image: '',
+			data: {},
+			type: '',
+			id: '0',
+			countries: [],
+			available_countries: []
+		}
+	},
+	computed: {
+		...mapGetters({
+			user: 'getUser'
+		})
+	},
+	mounted() {
+		EventBus.$on('analyze_track', this.showTrack)
+		EventBus.$on('analyze_album', this.showAlbum)
+		EventBus.$on('analyze_notSupported', this.notSupported)
+	},
+	methods: {
+		convertDuration,
+		reset() {
+			this.title = 'Loading...'
+			this.subtitle = ''
+			this.image = ''
+			this.data = {}
+			this.type = ''
+			this.link = ''
+			this.countries = []
+			this.available_countries = []
+		},
+		showTrack(data) {
+			this.reset()
+			const {
+				title,
+				title_version,
+				album: { cover_xl },
+				link,
+				available_countries,
+				id
+			} = data
+
+			this.title = title + (title_version && !title.includes(title_version) ? ' ' + title_version : '')
+			this.image = cover_xl
+			this.type = 'track'
+			this.link = link
+			this.id = id
+
+			available_countries.forEach(cc => {
+				const temp = []
+				const chars = [...cc].map(c => c.charCodeAt() + 127397)
+				temp.push(String.fromCodePoint(...chars))
+				temp.push(COUNTRIES[cc])
+				temp.push(cc.toUpperCase())
+				this.countries.push(temp)
+				this.available_countries.push(cc.toLowerCase())
+			})
+
+			this.data = data
+		},
+		showAlbum(data) {
+			this.reset()
+			const { title, cover_xl, link, id } = data
+
+			this.title = title
+			this.image = cover_xl
+			this.type = 'album'
+			this.link = link
+			this.data = data
+			this.id = id
+		},
+		notSupported() {
+			this.link = 'error'
+		},
+		addToQueue(e) {
+			sendAddToQueue(e.currentTarget.dataset.link)
+		}
+	}
+}
+</script>
+
+<style></style>

webui/src/data/sidebar.js

@@ -27,6 +27,13 @@ export const links = [
     icon: 'star',
     label: 'sidebar.favorites',
     auth: true
+  },
+	{
+    name: 'spotify-home',
+    ariaLabel: 'spotify home',
+    routerName: 'Spotify Home',
+    icon: 'contactless',
+    label: 'sidebar.spotify',
   },
   {
     name: 'analyzer',

webui/src/lang/en.mjs

@@ -500,6 +500,7 @@ const en = {
     charts: 'charts',
     favorites: 'favorites',
     linkAnalyzer: 'link analyzer',
+		spotify: 'spotify home',
     settings: 'settings',
     logs: 'logs',
     about: 'about'

webui/src/router.js

@@ -14,6 +14,7 @@ import LinkAnalyzer from '@/components/pages/LinkAnalyzer.vue'
 import Search from '@/components/pages/Search.vue'
 import Settings from '@/components/pages/Settings.vue'
 import Tracklist from '@/components/pages/Tracklist.vue'
+import Spotify from '@/components/pages/Spotify.vue'
 
 import { fetchData } from '@/utils/api'
 import EventBus from '@/utils/EventBus'
@@ -98,6 +99,11 @@ const routes = [
     name: 'Spotify Features',
     component: InfoSpotifyFeatures
   },
+	{
+		path: '/spotify-home',
+		name: 'Spotify Home',
+		component: Spotify
+	},
   {
     path: '/settings',
     name: 'Settings',

webui/src/use/spotifyplaylists.js

@@ -0,0 +1,49 @@
+import { ref, computed } from '@vue/composition-api'
+import store from '@/store'
+import { fetchData } from '@/utils/api'
+import { toast } from '@/utils/toasts'
+import i18n from '@/plugins/i18n'
+import { SPOTIFY_STATUS } from '@/constants'
+
+const favoriteSpotifyPlaylists = ref([])
+const isLoggedWithSpotify = computed(() => store.getters.isLoggedWithSpotify)
+
+const isRefreshingSpotifyPlaylists = ref(false)
+
+const setSpotifyPlaylists = response => {
+  if (response.error) {
+    favoriteSpotifyPlaylists.value = []
+    switch (response.error) {
+      case 'spotifyNotEnabled':
+        store.dispatch('setSpotifyStatus', SPOTIFY_STATUS.DISABLED).catch(console.error)
+        break
+      case 'wrongSpotifyUsername':
+        toast(i18n.t('toasts.wrongSpotifyUsername', { username: response.username }), 'person_off')
+        break
+      default:
+        break
+    }
+    return
+  }
+
+  favoriteSpotifyPlaylists.value = response || []
+}
+
+const refreshSpotifyPlaylists = async () => {
+  isRefreshingSpotifyPlaylists.value = true
+  await store.dispatch('refreshSpotifyStatus')
+
+  if (isLoggedWithSpotify.value) {
+    const spotifyUser = store.getters.getSpotifyUser.id
+
+    fetchData('getUserSpotifyPlaylists', { spotifyUser }).then(setSpotifyPlaylists).catch(console.error)
+  } else {
+    favoriteSpotifyPlaylists.value = []
+  }
+}
+
+export const useSpotifyPlaylists = () => ({
+	favoriteSpotifyPlaylists,
+	isRefreshingSpotifyPlaylists,
+	refreshSpotifyPlaylists 
+})