<template>
  <div class="video-block">
    <youtube-embed
      :url="value.url"
      v-if="isYoutube"/>
    <vimeo-embed
      :url="value.url"
      v-if="isVimeo"/>
    <srf-embed
      :url="value.url"
      v-if="isSrf"/>

  </div>
</template>

<script>
  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
  import VimeoEmbed from '@/components/videos/VimeoEmbed';
  import SrfEmbed from '@/components/videos/SrfEmbed';
  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';

  export default {
    props: ['value'],

    components: {
      YoutubeEmbed,
      VimeoEmbed,
      SrfEmbed
    },

    computed: {
      isYoutube() {
        return isYoutubeUrl(this.value.url);
      },
      isVimeo() {
        return isVimeoUrl(this.value.url);
      },
      isSrf() {
        return isSrfUrl(this.value.url);
      }
    }
  };
</script>

<style scoped lang="scss">
  .video-block {
    margin-bottom: 30px;
  }
</style>
