✨ (music) display music name

src/hooks/useSpotify.ts

@@ -17,9 +17,10 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
   const spotify = reactive({
     player: null
   })
-  const { accessToken, hasValidAccessToken } = useGetters<
+  const { accessToken, hasValidAccessToken, song } = useGetters<
     GetterTree<State, State>
-  >(['accessToken', 'hasValidAccessToken'])
+  >(['accessToken', 'hasValidAccessToken', 'song'])
+  const { setSong } = useActions<RootActions>(['setSong'])
 
   onMounted(() => {
     window.onSpotifyWebPlaybackSDKReady = async () => {
@@ -40,7 +41,14 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
         if (!state) {
           return
         }
-        !state.paused ? onPlay() : onPause()
+
+        if (state.paused) {
+          setSong(null)
+          onPause()
+        } else {
+          setSong(state.track_window?.current_track?.name ?? null)
+          onPlay()
+        }
       })
       await spotify.player.connect()
     }
@@ -72,7 +80,8 @@ export const useSpotify = (onPlay: () => void, onPause: () => void) => {
   return {
     ready,
     play,
-    pause
+    pause,
+    song
   }
 }