<template>
  <div class="chilled-music">
    <youtube-video
      v-show="false"
      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
    />
  </div>
</template>

<script lang="ts">
import 'youtube-video-js'
import { defineComponent, onMounted, watchEffect } from '@vue/composition-api'

const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)

export default defineComponent({
  name: 'ChilledMusic',
  props: {
    play: {
      type: Boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    if (iOS) {
      return
    }
    let chilledcow: HTMLVideoElement | null = null

    onMounted(() => {
      chilledcow = document.querySelector('youtube-video')
      chilledcow?.addEventListener('pause', () => {
        emit('pause')
      })
    })

    watchEffect(() => {
      props.play ? chilledcow?.play() : chilledcow?.pause()
    })
  }
})
</script>
