✨ (spotify) add spotify player

src/hooks/useMusic.ts

@@ -5,12 +5,20 @@ import { State, RootActions } from '@/store'
 export const useMusic = () => {
   const isIOS =
     navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-  const { hasMusic } = useGetters<GetterTree<State, State>>(['hasMusic'])
-  const { setHasMusic } = useActions<RootActions>(['setHasMusic'])
+  const { hasMusic, hasSpotify } = useGetters<GetterTree<State, State>>([
+    'hasMusic',
+    'hasSpotify'
+  ])
+  const { setHasMusic, setHasSpotify } = useActions<RootActions>([
+    'setHasMusic',
+    'setHasSpotify'
+  ])
 
   return {
     isMusicAvailable: !isIOS,
     hasMusic,
-    setHasMusic
+    setHasMusic,
+    hasSpotify,
+    setHasSpotify
   }
 }

src/hooks/useSpotify.ts

@@ -0,0 +1,89 @@
+/* eslint-disable */
+// @ts-ignore
+// @ts-nocheck
+import '@/lib/spotify-player'
+import { useGetters, useActions } from 'vuex-composition-helpers'
+import { GetterTree } from 'vuex'
+import { State, RootActions } from '@/store'
+import {
+  redirectToSpotifyConnect,
+  playOnSpotify,
+  pauseOnSpotify
+} from '@/utils/spotify'
+import { ref, reactive } from '@vue/composition-api'
+
+export const useSpotify = () => {
+  const ready = ref(false)
+  const deviceId = ref<string | null>(null)
+  const spotify = reactive({
+    player: null
+  })
+  const { accessToken, hasValidAccessToken } = useGetters<
+    GetterTree<State, State>
+  >(['accessToken', 'hasValidAccessToken'])
+
+  window.onSpotifyWebPlaybackSDKReady = async () => {
+    if (!hasValidAccessToken.value) {
+      redirectToSpotifyConnect()
+      return
+    }
+
+    spotify.player = new Spotify.Player({
+      name: 'binome',
+      getOAuthToken: (callback) => callback(accessToken.value)
+    })
+    spotify.player.addListener('ready', ({ device_id }) => {
+      deviceId.value = device_id
+      ready.value = true
+    })
+    await spotify.player.connect()
+  }
+
+  const play = async () => {
+    try {
+      if (spotify.player && ready.value) {
+        const playerState = await spotify.player.getCurrentState()
+        console.log(playerState)
+
+        if (!playerState) {
+          playOnSpotify(accessToken.value, deviceId.value)
+          return
+        }
+        await spotify.player.resume()
+      }
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  const pause = () => {
+    if (ready.value) {
+      pauseOnSpotify(accessToken.value, deviceId.value)
+    }
+  }
+
+  return {
+    ready,
+    play,
+    pause
+  }
+}
+
+export const useSpotifyConnect = (hash: string) => {
+  window.onSpotifyWebPlaybackSDKReady = () => {}
+  const { setAccessToken, setTokenExpire } = useActions<RootActions>([
+    'setAccessToken',
+    'setTokenExpire'
+  ])
+  hash = hash.replace('#', '')
+  const connection = [...hash.split('&').values()]
+    .map((entry) => entry.split('='))
+    .reduce((acc, entry) => {
+      acc[entry[0]] = entry[1]
+      return acc
+    }, {})
+
+  setAccessToken(connection['access_token'])
+  const now = new Date()
+  setTokenExpire(now.setTime(now.getTime() + connection['expires_in'] * 1000))
+}