✨ (spotify) add spotify player

src/components/ChilledMusic.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="chilled-music">
     <transition name="fade">
-      <img v-show="!ready" src="@/assets/loader.svg" :alt="$t('loading')" />
+      <img
+        v-show="!ready"
+        class="loader"
+        src="@/assets/loader.svg"
+        :alt="$t('music.loading')"
+      />
     </transition>
     <section v-show="false">
       <div
@@ -99,29 +104,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-@keyframes rotating {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-img {
-  animation: rotating 4s linear infinite;
-}
-</style>
-
-<i18n>
-{
-  "en": {
-    "loading": "loading..."
-  },
-  "fr": {
-    "loading": "chargement..."
-  }
-}
-</i18n>

src/components/IntervalInput.vue

@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
-import { useInterval } from '../hooks/useInterval'
+import { useInterval } from '@/hooks/useInterval'
 
 export default defineComponent({
   name: 'IntervalInput',

src/components/SpotifyMusic.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="spotify-music">
+    <transition name="fade">
+      <img
+        v-show="!ready"
+        class="loader"
+        src="@/assets/loader.svg"
+        :alt="$t('music.loading')"
+      />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watchEffect } from '@vue/composition-api'
+import { useSpotify } from '@/hooks/useSpotify'
+
+export default defineComponent({
+  name: 'SpotifyMusic',
+  props: {
+    play: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup(props) {
+    const { ready, play, pause } = useSpotify()
+
+    watchEffect(() => {
+      props.play ? play() : pause()
+    })
+
+    return { ready, play, pause }
+  }
+})
+</script>

src/components/ZoneMusic.vue

@@ -20,16 +20,25 @@
           :class="{ selected: hasMusic, disabled: !hasMusic }"
         >
           <span v-t="'chill'"></span>
+          <SpotifyMusic
+            v-if="hasSpotify"
+            :play="play"
+            @play="onPlay"
+            @pause="onPause"
+          />
           <ChilledMusic
             class="chilled-music"
-            v-if="hasMusic"
+            v-else-if="hasMusic"
             :play="play"
-            @play="play"
-            @pause="pause"
+            @play="onPlay"
+            @pause="onPause"
           />
         </span>
       </label>
     </div>
+    <p v-if="!hasSpotify">
+      connect with <a href="#" @click.prevent="setHasSpotify(true)">Spotify</a>
+    </p>
   </div>
 </template>
 
@@ -40,7 +49,8 @@ import { useMusic } from '@/hooks/useMusic'
 export default defineComponent({
   name: 'ZoneMusic',
   components: {
-    ChilledMusic: () => import('@/components/ChilledMusic.vue')
+    ChilledMusic: () => import('@/components/ChilledMusic.vue'),
+    SpotifyMusic: () => import('@/components/SpotifyMusic.vue')
   },
   props: {
     play: {
@@ -49,17 +59,31 @@ export default defineComponent({
     }
   },
   setup(_, { emit }) {
-    const { isMusicAvailable, hasMusic, setHasMusic } = useMusic()
+    const {
+      isMusicAvailable,
+      hasSpotify,
+      setHasSpotify,
+      hasMusic,
+      setHasMusic
+    } = useMusic()
 
-    const play = () => {
+    const onPlay = () => {
       emit('play')
     }
 
-    const pause = () => {
+    const onPause = () => {
       emit('pause')
     }
 
-    return { isMusicAvailable, hasMusic, setHasMusic, play, pause }
+    return {
+      isMusicAvailable,
+      hasSpotify,
+      setHasSpotify,
+      hasMusic,
+      setHasMusic,
+      onPlay,
+      onPause
+    }
   }
 })
 </script>
@@ -110,6 +134,10 @@ label[data-pm-holder] {
 .disabled {
   color: desaturate($color, 70%);
 }
+
+p {
+  font-family: $serif-font-family;
+}
 </style>
 
 <i18n>