♻️ (music) change lib to handle youtube video

src/components/ChilledMusic.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="chilled-music">
-    <youtube-video
+    <div class="plyr__video-embed" id="player" v-show="false">
-      v-show="false"
+      <iframe src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"></iframe>
-      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
+    </div>
-    />
   </div>
 </template>
 
 <script lang="ts">
-import 'youtube-video-js'
+import Plyr from 'plyr'
-import { defineComponent, onMounted, watchEffect } from '@vue/composition-api'
+
+import {
+  defineComponent,
+  onMounted,
+  watchEffect,
+  reactive,
+  onUnmounted
+} from '@vue/composition-api'
 
 const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
 
@@ -25,17 +31,41 @@ export default defineComponent({
     if (iOS) {
       return
     }
-    let chilledcow: HTMLVideoElement | null = null
+    const chilledcow = reactive<{ video: Plyr | null }>({
+      video: null
+    })
+
+    const onPlay = () => {
+      if (!props.play) {
+        emit('play')
+      }
+    }
+
+    const onPause = () => {
+      if (props.play) {
+        emit('pause')
+      }
+    }
 
     onMounted(() => {
-      chilledcow = document.querySelector('youtube-video')
+      chilledcow.video = new Plyr('#player')
-      chilledcow?.addEventListener('pause', () => {
+      chilledcow.video.on('play', onPlay)
-        emit('pause')
+      chilledcow.video.on('pause', onPause)
+      chilledcow.video.on('ready', () => {
+        if (props.play) {
+          chilledcow.video?.play()
+        }
       })
     })
 
+    onUnmounted(() => {
+      chilledcow.video?.off('play', onPlay)
+      chilledcow.video?.off('pause', onPause)
+      chilledcow.video?.destroy()
+    })
+
     watchEffect(() => {
-      props.play ? chilledcow?.play() : chilledcow?.pause()
+      props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
     })
   }
 })

src/hooks/useMusic.ts

@@ -0,0 +1,9 @@
+import { ref } from '@vue/composition-api'
+
+export const useMusic = () => {
+  const hasMusic = ref(true)
+
+  return {
+    hasMusic
+  }
+}

src/views/Home.vue

@@ -22,13 +22,28 @@
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
-    <ChilledMusic :play="timeState === 'started'" @pause="clear" />
+    <div>
+      <input
+        type="checkbox"
+        name="use-music"
+        id="use-music"
+        v-model="hasMusic"
+      />
+      <label for="use-music">Musique de fond</label>
+      <ChilledMusic
+        v-if="hasMusic"
+        :play="timeState === 'started'"
+        @play="start"
+        @pause="clear"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onUnmounted } from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
+import { useMusic } from '@/hooks/useMusic'
 import DevSession from '@/components/DevSession.vue'
 import ChilledMusic from '@/components/ChilledMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
@@ -41,6 +56,7 @@ export default defineComponent({
     IntervalInput
   },
   setup() {
+    const { hasMusic } = useMusic()
     const {
       interval,
       start,
@@ -54,6 +70,7 @@ export default defineComponent({
     onUnmounted(clear)
 
     return {
+      hasMusic,
       interval,
       start,
       clear,