♻️ (music) change lib to handle youtube video

src/components/ChilledMusic.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="chilled-music">
-    <youtube-video
-      v-show="false"
-      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
-    />
+    <div class="plyr__video-embed" id="player" v-show="false">
+      <iframe src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"></iframe>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import 'youtube-video-js'
-import { defineComponent, onMounted, watchEffect } from '@vue/composition-api'
+import Plyr from 'plyr'
+
+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?.addEventListener('pause', () => {
-        emit('pause')
+      chilledcow.video = new Plyr('#player')
+      chilledcow.video.on('play', onPlay)
+      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()
     })
   }
 })