✨ (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>