<template>
  <div class="video-player">
    <video
      ref="videoPlayer"
      class="video-js vjs-matrix vjs-yoho"
      controls
      preload="auto">
      <source :src="source" type="video/mp4"></source>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
      </p>
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  name: 'VideoPlayer',
  props: {
    source: String,
    options: {
      type: Object,
      default() {
        return {
          techOrder: ['html5', 'flash'],
          muted: true,
          controls: true,
          aspectRatio: '1:1'
        };
      }
    }
  },
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      this.play();
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style src="video.js/dist/video-js.css"></style>
<style lang="scss" scoped>
  .video-js {
    width: 100%;
    height: auto;

    video {
      width: 100%;
    }

    &.vjs-yoho /deep/ {
      .vjs-big-play-button {
        width: 70px;
        height: 70px;
        line-height: 70px;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        margin: -35px auto auto -35px;
      }

      .vjs-control-bar .vjs-icon-placeholder {
        font-size: 22px;
      }
    }
  }
</style>