✨ (spotify) change button and access it event on iOS

src/components/ZoneMusic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zone-music plume" v-if="isMusicAvailable">
+  <div class="zone-music plume">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
         <span
@@ -28,7 +28,7 @@
           />
           <ChilledMusic
             class="chilled-music"
-            v-else-if="hasMusic"
+            v-else-if="isMusicAvailable && hasMusic"
             :play="play"
             @play="onPlay"
             @pause="onPause"
@@ -37,7 +37,10 @@
       </label>
     </div>
     <p v-if="!hasSpotify">
-      connect with <a href="#" @click.prevent="setHasSpotify(true)">Spotify</a>
+      <button href="#" @click.prevent="setHasSpotify(true)">
+        {{ $t('music.useSpotify') }}
+        <img class="spotify" src="@/assets/spotify.svg" alt="Spotify" />
+      </button>
     </p>
   </div>
 </template>
@@ -138,6 +141,19 @@ label[data-pm-holder] {
 p {
   font-family: $serif-font-family;
 }
+
+button {
+  font-family: $serif-font-family;
+  font-weight: bold;
+  font-size: 18px;
+  padding: 0.5rem;
+}
+
+.spotify {
+  display: inline-block;
+  width: 20px;
+  vertical-align: middle;
+}
 </style>
 
 <i18n>