import Vue from 'vue'
import './SntVideo.scss'

export default Vue.extend({
  name: 'SntVideo',
  props: {
    src: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '560'
    },
    height: {
      type: String,
      default: '315'
    }
  },
  data () {
    return {
    }
  },
  computed: {
    youtubeNoCookieUrl () {
      const id = this.youtubeParser(this.src)
      return id ? `https://www.youtube-nocookie.com/embed/${id}` : null
    }
  },
  methods: {
    youtubeParser (url) {
      let ID = ''
      const urls = url.replace(/(>|<)/gi, '').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/)
      if (urls[2] !== undefined) {
        ID = urls[2].split(/[^0-9a-z_\\-]/i)[0]
      } else {
        ID = urls
      }
      return ID
    }
  },
  template: `
    <div class="snt-video">
      <iframe
        :src="youtubeNoCookieUrl"
        :width="width"
        :height="height"
        class="snt-video__iframe"
        frameborder="0"
        allowfullscreen />
    </div>
  `
})
