✨ (spotify) play and pause when controlling

src/components/SpotifyMusic.vue

@@ -23,8 +23,19 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
-    const { ready, play, pause } = useSpotify()
+    const onPlay = () => {
+      if (!props.play) {
+        emit('play')
+      }
+    }
+
+    const onPause = () => {
+      if (props.play) {
+        emit('pause')
+      }
+    }
+    const { ready, play, pause } = useSpotify(onPlay, onPause)
 
     watchEffect(() => {
       props.play ? play() : pause()

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()
   }
 

src/store/index.ts

@@ -17,6 +17,7 @@ export interface State {
 export interface RootActions extends ActionTree<State, State> {
   setInterval: (ctx: ActionContext<State, State>, payload: number) => void
   setHasMusic: (ctx: ActionContext<State, State>, payload: boolean) => void
+  setHasSpotify: (ctx: ActionContext<State, State>, payload: boolean) => void
   setDev1: (ctx: ActionContext<State, State>, payload: string) => void
   setDev2: (ctx: ActionContext<State, State>, payload: string) => void
   setAccessToken: (ctx: ActionContext<State, State>, payload: string) => void

src/utils/spotify.ts

@@ -20,6 +20,20 @@ export const redirectToSpotifyConnect = () => {
 }
 
 export const playOnSpotify = async (token: string, deviceId: string) => {
+  // const response = await fetch(
+  //   `https://api.spotify.com/v1/me/player/shuffle?device_id=${deviceId}&state=true`,
+  //   {
+  //     method: 'PUT',
+  //     headers: {
+  //       accept: 'application/json',
+  //       'content-type': 'application/json',
+  //       authorization: `Bearer ${token}`
+  //     }
+  //   }
+  // )
+
+  // console.log(await response.json())
+
   await fetch(
     `https://api.spotify.com/v1/me/player/play?device_id=${deviceId}`,
     {