<template>
  <div>
    <div style="min-width:200px; width:100%;" :id='config.id' :style='rootStyle'></div>
  </div>
</template>

<script>
import Player from 'xgplayer';
import 'xgplayer-mp4';
import HlsJsPlayer from 'xgplayer-hls.js';
import 'xgplayer-hls';
import FlvJsPlayer from 'xgplayer-flv.js';
import FlvPlayer from 'xgplayer-flv';
import ShakaJsPlayer from 'xgplayer-shaka';
import Music from 'xgplayer-music';
export default {
  name: 'VueXgplayer',
  data: function () {
    return {
      player: null
    }
  },
  props: {
    config: {
      type: Object,
      default () {
        return { id: 'mse', url: '' }
      }
    },
    format: {
      type: String,
      default: 'mp4'
    },
    rootStyle: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  methods: {
    init() {
      let self = this;
      if (this.config.url && this.config.url !== '') {
        this.config.ignores = this.config.ignores ? this.config.ignores.concat(['mp4player','hlsplayer','theme-default','cover','backward','forward','meta','next','prev', 'template']) : ['mp4player','hlsplayer','theme-default','cover','backward','forward','meta','next','prev', 'template'];
        if (this.player != null){
          this.player.destroy(true)
        }
        if (this.format === 'hls') {
          this.player = new HlsJsPlayer(this.config);
        } else if (this.format === 'xg-hls') {
          this.config.ignores.splice(this.config.ignores.indexOf('hlsplayer'), 1);
          this.player = new Player(this.config);
        } else if (this.format === 'flv') {
          this.player = new FlvJsPlayer(this.config);
        } else if (this.format === 'xg-flv') {
          this.player = new FlvPlayer(this.config);
        } else if (this.format === 'dash') {
          this.player = new ShakaJsPlayer(this.config);
        } else if (this.format === 'xg-mp4') {
          this.config.ignores.splice(this.config.ignores.indexOf('mp4player'), 1);
          this.player = new Player(this.config);
        } else if (this.format === 'music') {
          ['theme-default','cover','backward','forward','meta','next','prev', 'template'].forEach(item => {
            this.config.ignores.splice(this.config.ignores.indexOf(item), 1);
          })
          this.player = new Music(this.config);
        } else {
          this.player = new Player(this.config);
        }
        this.$emit('player', this.player)
        console.log(this.player.root)
      }
    },
    //点击跳转指定知识点
    jumpDot(){
      console.log("6666");
    }
  },
  mounted() {
    this.init();
  },
  updated() {
    this.init();
  },
  watch: {
    config(newVal, oldVal) {

    }
  }
}
</script>
<style>
.xgplayer {width:100% !important; position: relative;}
.xgplayerWatermark{
  position:absolute;
  top:15px;
  left:15px;
  font-size:26px;
  color: rgba(0,0,0,0.5);
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  font-weight:700;
  background:rgba(255,255,255,0.3);
}

/* 播放器的样式优化 */
.xgplayer-skin-default .xgplayer-progress-outer{
  -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s;
  height:5px;
}
.xgplayer-skin-default .xgplayer-progress:hover  .xgplayer-progress-outer{
  height:9px;
}
.xgplayer-skin-default .xgplayer-progress-dot{
  -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s;
  width:6px;
  height:6px;
  top:-1px;
  box-shadow:0 0 4px rgb(0,0,0,0.2);
}
.xgplayer-skin-default .xgplayer-progress:hover  .xgplayer-progress-dot{
  width:6px;
  height:6px;
  top:1px;
  box-shadow:0 0 4px rgb(0,0,0,0.6);
}
.xgplayer-skin-default .xgplayer-progress  .xgplayer-progress-dot:hover{
  width:8px;
  height:8px;
  top:0px;
  box-shadow:0 0 4px rgb(0,0,0,0.9);
}
.xgplayer-skin-default .xgplayer-progress-dot-show .xgplayer-progress-tip{
  background: rgba(0,0,0,0.9);
  padding:4px 10px;
  color:#fff;  
}
.xgplayer-skin-default .xgplayer-progress-played{
  background-image: linear-gradient(-90deg,#2578df,#6bbcfb);
}
.xgplayer-skin-default .xgplayer-progress-btn::after{
  content: '';
  display: block;
  top: 0;
  left: 5px;
  width: 13px;
  height: 13px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(0,0,0,.26);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 36;
  background:#fff;
  border:1px solid #2578df;
  position: absolute;
}
.xgplayer-skin-default .xgplayer-progress-btn::before{
    content: '';
    display: block;
    background: #2578df;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    opacity: 0.3;
    position: absolute;
    top: -8px;
    left: -10px;
    z-index:2;
    -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -ms-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;
}
.xgplayer-skin-default .xgplayer-progress-btn:hover::before{  
    opacity: 0.8;
}
</style>