<template>
  <div>
    <video ref="player" class="video-js vjs-default-skin vjs-big-play-centered"></video>
  </div>
</template>

<script>
import videojs from 'video.js'

window.videojs = videojs

require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')

const defaultPlayerOptions = {
  controls: true,
  autoplay: false,
  muted: false,
  language: 'zh-CN',
  fluid: true,
  // liveui: true,
  controlBar: {
    children: [
      {name: 'playToggle'}, // 播放按钮
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: true // 不使用水平方式
      },
      {name: 'FullscreenToggle'}, // 全屏
      {name: 'FullscreenToggle'}
    ]
  }
}

export default {
  name: 'VideoPlayer',
  props: {
    sources: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default() { return {} }
    },
    autoadvance: {
      type: Number,
      default: null
    }
  },
  data() {
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
    return {
      player: null,
      playerOptions
    }
  },
  computed: {
    playlist() {
      return this.sources
    }
  },
  watch: {
    playlist: {
      handler(list) {
        if (!this.player) return
        this.player.playlist(list)
        if (list.length > 0) {
          this.player.playlist.autoadvance(this.autoadvance)
          // this.player.playlist.first();
        }
        this.$emit('playlistchange', list)
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    init() {
      const player = videojs(this.$refs.player, this.playerOptions)
      this.player = player
      this.player.on('playlistitem', (...args) => {
        this.$emit('playlistitem', ...args)
      })
      this.$emit('player-inited', player)
    }
  }
}
</script>

<style lang="scss">

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

.vjs-slider-vertical .vjs-volume-level:before {
  top: -.4em;
  left: -.4em;
}

.video-js {
  .vjs-play-progress:before {
    top: -.5em;
    transform-origin: center;
  }
  .vjs-progress-control:hover {
      .vjs-play-progress:before {
        transform: translateY(0.17em);
      }
    }
}
</style>