♻️ (spotify) simplify hook

src/components/ZoneMusic.vue

@@ -22,7 +22,7 @@
           <span v-t="'chill'"></span>
           <SpotifyMusic
             v-if="hasSpotify"
-            :play="play"
+            :play="play && hasMusic"
             @play="onPlay"
             @pause="onPause"
           />

src/hooks/useSpotify.ts

@@ -20,9 +20,6 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
   const { accessToken, hasValidAccessToken } = useGetters<
     GetterTree<State, State>
   >(['accessToken', 'hasValidAccessToken'])
-  const { setAccessToken, setTokenExpire, setHasSpotify } = useActions<
-    RootActions
-  >(['setAccessToken', 'setTokenExpire', 'setHasSpotify'])
 
   onMounted(() => {
     window.onSpotifyWebPlaybackSDKReady = async () => {
@@ -40,26 +37,11 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
         ready.value = true
       })
       spotify.player.addListener('player_state_changed', (state) => {
-        console.log('player state changed', state)
         if (!state) {
           return
         }
         !state.paused ? onPlay() : onPause()
       })
-      spotify.player.addListener('not_ready', () => {
-        setAccessToken(null)
-        setTokenExpire(null)
-        setHasSpotify(false)
-      })
-      spotify.player.on('playback_error', (error) => {
-        console.error('Failed to perform playback', error)
-      })
-      spotify.player.on('account_error', (error) => {
-        console.error('account_error', error)
-      })
-      spotify.player.on('initialization_error', (error) => {
-        console.error('initialization_error', error)
-      })
       await spotify.player.connect()
     }
     import('@/lib/spotify-player')
@@ -69,7 +51,6 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
     try {
       if (spotify.player && ready.value) {
         const playerState = await spotify.player.getCurrentState()
-        console.log(playerState)
 
         if (!playerState) {
           playOnSpotify(accessToken.value, deviceId.value)

src/locales/en.json

@@ -11,6 +11,6 @@
   },
   "music": {
     "loading": "loading...",
-    "useSpotify": "For the best experience, use"
+    "useSpotify": "For a pure experience, connect to"
   }
 }

src/locales/fr.json

@@ -11,6 +11,6 @@
   },
   "music": {
     "loading": "loading...",
-    "useSpotify": "Ayez une meilleure expérience avec"
+    "useSpotify": "Pour une meilleure expérience, utilisez"
   }
 }

src/utils/spotify.ts

@@ -1,10 +1,27 @@
-const LOFI = 'spotify:playlist:0vvXsWCC9xrXsKd4FyS8kM'
+const PLAYLIST_IDS = [
-const LOFI_MAX = 250
+  'spotify:playlist:0vvXsWCC9xrXsKd4FyS8kM',
+  'spotify:playlist:5G1gAuXjmJHgEoI7XzrXOP',
+  'spotify:playlist:5OJs7eATLrvZ2Ea9als3lK',
+  'spotify:playlist:5NKv3Ucc0kqe1Me7CEdWty',
+  'spotify:playlist:0jGkhFr4yxLlHnpRg2Njj4'
+]
+
+interface SpotifyTracks {
+  items: Array<{ track: { name: string } }>
+}
 
 const random = (max: number) => {
   return Math.floor(Math.random() * Math.floor(max))
 }
 
+const getHeaders = (token: string) => ({
+  headers: {
+    accept: 'application/json',
+    'content-type': 'application/json',
+    authorization: `Bearer ${token}`
+  }
+})
+
 export const redirectToSpotifyConnect = () => {
   const authorizeURL = new URL('https://accounts.spotify.com/authorize')
   authorizeURL.searchParams.append(
@@ -23,19 +40,21 @@ export const redirectToSpotifyConnect = () => {
 }
 
 export const playOnSpotify = async (token: string, deviceId: string) => {
+  const playlistId = PLAYLIST_IDS[random(PLAYLIST_IDS.length - 1)]
+  const trackResult = await fetch(
+    `https://api.spotify.com/v1/playlists/${playlistId}/tracks?fields=items(track(name))`
+  )
+  const tracks = (await trackResult.json()) as SpotifyTracks
+
   await fetch(
     `https://api.spotify.com/v1/me/player/play?device_id=${deviceId}`,
     {
       method: 'PUT',
-      headers: {
+      ...getHeaders(token),
-        accept: 'application/json',
-        'content-type': 'application/json',
-        authorization: `Bearer ${token}`
-      },
       body: JSON.stringify({
-        context_uri: LOFI,
+        context_uri: PLAYLIST_IDS[random(PLAYLIST_IDS.length - 1)],
         offset: {
-          position: random(LOFI_MAX)
+          position: random(tracks?.items?.length || 0)
         }
       })
     }
@@ -47,11 +66,7 @@ export const pauseOnSpotify = async (token: string, deviceId: string) => {
     `https://api.spotify.com/v1/me/player/pause?device_id=${deviceId}`,
     {
       method: 'PUT',
-      headers: {
+      ...getHeaders(token)
-        accept: 'application/json',
-        'content-type': 'application/json',
-        authorization: `Bearer ${token}`
-      }
     }
   )
 }