✨ (music) display music name

src/components/ZoneMusic.vue

@@ -42,12 +42,25 @@
         <img class="spotify" src="@/assets/spotify.svg" alt="Spotify" />
       </button>
     </p>
+    <transition name="fade" mode="out-in">
+      <p v-if="song" key="song">
+        {{ $t('music.nowPlaying') }}
+        <span class="song-name">{{ song }}</span
+        >.
+      </p>
+      <p v-else key="no-code">
+        {{ $t('music.codeAndChill') }}
+      </p>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
+import { GetterTree } from 'vuex'
 import { defineComponent } from '@vue/composition-api'
+import { State } from '@/store'
 import { useMusic } from '@/hooks/useMusic'
+import { useGetters } from 'vuex-composition-helpers'
 
 export default defineComponent({
   name: 'ZoneMusic',
@@ -62,6 +75,7 @@ export default defineComponent({
     }
   },
   setup(_, { emit }) {
+    const { song } = useGetters<GetterTree<State, State>>(['song'])
     const {
       isMusicAvailable,
       hasSpotify,
@@ -85,7 +99,8 @@ export default defineComponent({
       hasMusic,
       setHasMusic,
       onPlay,
-      onPause
+      onPause,
+      song
     }
   }
 })
@@ -154,6 +169,10 @@ button {
   width: 20px;
   vertical-align: middle;
 }
+
+.song-name {
+  font-style: italic;
+}
 </style>
 
 <i18n>

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

src/locales/en.json

@@ -11,6 +11,8 @@
   },
   "music": {
     "loading": "loading...",
-    "useSpotify": "For a pure experience, connect to"
+    "useSpotify": "For a pure experience, connect to",
+    "nowPlaying": "Now playing:",
+    "codeAndChill": "Code and chill, chill and code..."
   }
 }

src/locales/fr.json

@@ -11,6 +11,8 @@
   },
   "music": {
     "loading": "loading...",
-    "useSpotify": "Pour une meilleure expérience, utilisez"
+    "useSpotify": "Pour une meilleure expérience, utilisez",
+    "nowPlaying": "Lecture en cours :",
+    "codeAndChill": "Codez, zen..."
   }
 }

src/store/index.ts

@@ -8,6 +8,7 @@ export interface State {
   interval: number
   hasMusic: boolean
   hasSpotify: boolean
+  song: string | null
   dev1: string | null
   dev2: string | null
   accessToken: string | null
@@ -24,24 +25,27 @@ export interface RootActions extends ActionTree<State, State> {
   setTokenExpire: (ctx: ActionContext<State, State>, payload: Date) => void
 }
 
-const vuexLocal = new VuexPersistence<State>({
-  key: 'binome',
-  storage: window.localStorage
-})
-
 const SET_INTERVAL = 'SET_INTERVAL'
 const WITH_MUSIC = 'WITH_MUSIC'
 const WITH_SPOTIFY = 'WITH_SPOTIFY'
+const SET_SONG = 'SET_SONG'
 const SET_DEV_1 = 'SET_DEV_1'
 const SET_DEV_2 = 'SET_DEV_2'
 const SET_ACCESS_TOKEN = 'SET_ACCESS_TOKEN'
 const SET_TOKEN_EXPIRE = 'SET_TOKEN_EXPIRE'
 
+const vuexLocal = new VuexPersistence<State>({
+  key: 'binome',
+  storage: window.localStorage,
+  filter: (mutation) => mutation.type !== SET_SONG
+})
+
 const store = new Vuex.Store<State>({
   state: {
     interval: 5,
     hasMusic: false,
     hasSpotify: false,
+    song: null,
     dev1: null,
     dev2: null,
     accessToken: null,
@@ -51,6 +55,7 @@ const store = new Vuex.Store<State>({
     interval: ({ interval }) => interval,
     hasMusic: ({ hasMusic }) => hasMusic,
     hasSpotify: ({ hasSpotify }) => hasSpotify,
+    song: ({ song }) => song,
     dev1: ({ dev1 }) => dev1,
     dev2: ({ dev2 }) => dev2,
     accessToken: ({ accessToken }) => accessToken,
@@ -71,6 +76,9 @@ const store = new Vuex.Store<State>({
     [WITH_SPOTIFY](state, hasSpotify: boolean) {
       state.hasSpotify = hasSpotify
     },
+    [SET_SONG](state, song: string | null) {
+      state.song = song
+    },
     [SET_DEV_1](state, dev1: string) {
       state.dev1 = dev1
     },
@@ -99,6 +107,9 @@ const store = new Vuex.Store<State>({
     setDev1({ commit }, dev1: string) {
       commit(SET_DEV_1, dev1)
     },
+    setSong({ commit }, song: string) {
+      commit(SET_SONG, song)
+    },
     setDev2({ commit }, dev2: string) {
       commit(SET_DEV_2, dev2)
     },
@@ -112,4 +123,10 @@ const store = new Vuex.Store<State>({
   plugins: [vuexLocal.plugin]
 })
 
+const cleanStore = () => {
+  store.dispatch('setSong', null)
+}
+
+cleanStore()
+
 export default store

src/views/SpotifyCallback.vue

@@ -4,11 +4,15 @@
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
-import { useSpotifyConnect } from '../hooks/useSpotify'
+import { useSpotifyConnect } from '@/hooks/useSpotify'
+import { useActions } from 'vuex-composition-helpers'
+import { RootActions } from '@/store'
 
 export default defineComponent({
   name: 'SpotifyCallback',
   setup(_, { root }) {
+    const { setHasMusic } = useActions<RootActions>(['setHasMusic'])
+    setHasMusic(true)
     useSpotifyConnect(root.$router.currentRoute.hash)
     root.$router.replace({ name: 'Home' })
   }