✨ (chilled) add loader when loading music

src/components/ChilledMusic.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="chilled-music" v-show="false">
-    <div
-      class="chilled-music plyr__video-embed"
-      id="player"
-      allowfullscreen
-      allowtransparency
-      allow="autoplay"
-      data-plyr-provider="youtube"
-      data-plyr-embed-id="5qap5aO4i9A"
-    ></div>
+  <div class="chilled-music">
+    <img v-if="!ready" src="@/assets/loader.svg" alt="loading" />
+    <section v-show="false">
+      <div
+        class="chilled-music plyr__video-embed"
+        id="player"
+        allowfullscreen
+        allowtransparency
+        allow="autoplay"
+        data-plyr-provider="youtube"
+        data-plyr-embed-id="5qap5aO4i9A"
+      ></div>
+    </section>
   </div>
 </template>
 
@@ -20,7 +23,8 @@ import {
   onMounted,
   watchEffect,
   reactive,
-  onUnmounted
+  onUnmounted,
+  ref
 } from '@vue/composition-api'
 
 export default defineComponent({
@@ -32,6 +36,7 @@ export default defineComponent({
     }
   },
   setup(props, { emit }) {
+    const ready = ref(false)
     const chilledcow = reactive<{ video: Plyr | null }>({
       video: null
     })
@@ -48,7 +53,7 @@ export default defineComponent({
       }
     }
 
-    onMounted(() => {
+    const init = () => {
       chilledcow.video = new Plyr('#player', {
         youtube: {
           noCookie: true,
@@ -62,16 +67,21 @@ export default defineComponent({
           options: [240]
         }
       })
+      chilledcow.video.on('error', init)
       chilledcow.video.on('play', onPlay)
       chilledcow.video.on('pause', onPause)
       chilledcow.video.on('ready', () => {
+        ready.value = true
         if (props.play) {
           chilledcow.video?.play()
         }
       })
-    })
+    }
+
+    onMounted(init)
 
     onUnmounted(() => {
+      chilledcow.video?.off('error', init)
       chilledcow.video?.off('play', onPlay)
       chilledcow.video?.off('pause', onPause)
       chilledcow.video?.destroy()
@@ -80,6 +90,25 @@ export default defineComponent({
     watchEffect(() => {
       props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
     })
+
+    return {
+      ready
+    }
   }
 })
 </script>
+
+<style lang="scss" scoped>
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+img {
+  animation: rotating 4s linear infinite;
+}
+</style>

src/components/ZoneMusic.vue

@@ -2,7 +2,9 @@
   <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ selected: !hasMusic, disabled: hasMusic }">focus</span>
+        <span class="focus" :class="{ selected: !hasMusic, disabled: hasMusic }"
+          >focus</span
+        >
         <input
           type="checkbox"
           name="use-music"
@@ -11,10 +13,21 @@
           @change="setHasMusic(!hasMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ selected: hasMusic, disabled: !hasMusic }">chill</span>
+        <span
+          class="chill"
+          :class="{ selected: hasMusic, disabled: !hasMusic }"
+        >
+          chill
+          <ChilledMusic
+            class="chilled-music"
+            v-if="hasMusic"
+            :play="play"
+            @play="play"
+            @pause="pause"
+          />
+        </span>
       </label>
     </div>
-    <ChilledMusic v-if="hasMusic" :play="play" @play="play" @pause="pause" />
   </div>
 </template>
 
@@ -52,7 +65,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
+.pm-field {
+  display: flex;
+  justify-content: center;
+}
+
 label[data-pm-holder] {
+  flex: 1;
   display: flex;
   justify-content: center;
   margin: auto;
@@ -63,6 +82,20 @@ label[data-pm-holder] {
     &.selected {
       font-weight: bold;
     }
+    &.focus {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    &.chill {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .chilled-music {
+        margin-left: 0.5rem;
+      }
+    }
   }
 }
 .pm-field {