✨ (spotify) play and pause when controlling

src/hooks/useSpotify.ts

@@ -12,7 +12,7 @@ import {
 } from '@/utils/spotify'
 import { ref, reactive } from '@vue/composition-api'
 
-export const useSpotify = () => {
+export const useSpotify = (onPlay: () => void, onPause: () => void) => {
   const ready = ref(false)
   const deviceId = ref<string | null>(null)
   const spotify = reactive({
@@ -21,6 +21,9 @@ export const useSpotify = () => {
   const { accessToken, hasValidAccessToken } = useGetters<
     GetterTree<State, State>
   >(['accessToken', 'hasValidAccessToken'])
+  const { setAccessToken, setTokenExpire, setHasSpotify } = useActions<
+    RootActions
+  >(['setAccessToken', 'setTokenExpire', 'setHasSpotify'])
 
   window.onSpotifyWebPlaybackSDKReady = async () => {
     if (!hasValidAccessToken.value) {
@@ -36,6 +39,15 @@ export const useSpotify = () => {
       deviceId.value = device_id
       ready.value = true
     })
+    spotify.player.addListener('player_state_changed', (state) => {
+      console.log('player state changed', state)
+      !state.paused ? onPlay() : onPause()
+    })
+    spotify.player.addListener('not_ready', () => {
+      setAccessToken(null)
+      setTokenExpire(null)
+      setHasSpotify(false)
+    })
     await spotify.player.connect()
   }