<template>
  <view class="video" style="width:100%; height:100%;">
    <view id="xgplayer" :pdestroy="xgdestroy" :change:pdestroy="xgplayer.playerDestroy" :purl="url" :change:purl="xgplayer.initPlayer" :ready="ready" :change:ready="xgplayer.readyChange"></view>
  </view>
</template>

<script>
  export default {
    props: ['url', 'xgdestroy'],
    data(){
      return {
		status:false,
        ready: false
      }
    },
    methods: {
      playStatus() {
        return this.status
      },
      onPlay() {
        this.$emit('onPlay', true);
      },
      playerReady(isReady) {
        this.ready = isReady
        this.$emit('playerReady', this.ready);
      },
	  changeStatus(status) {
	    this.status = status
	  },
      controlShow(show) {
        this.$emit('controlShow', show);
      },
    }
  }
</script>
<script module="xgplayer" lang="renderjs">
import Player from 'xgplayer/dist/simple_player'
// #ifdef APP-PLUS
import HlsJsPlayer from 'xgplayer-hls/dist/index'
// #endif
import playbackRate from 'xgplayer/dist/controls/playbackRate'
import playError from 'xgplayer/dist/controls/error'
export default{
  data() {
    return {
      ready: false,
      xgPlayer: null
    }
  },
  mounted(){
  },
  onunload() {
    if (this.ready) {
      this.xgPlayer.destroy()
    }
  },
  methods:{
    checkStatus() {
		var status = this.ready && this.xgPlayer.paused === false ? true : false
		ownerInstance.callMethod('changeStatus', status)
    },
    readyChange(newVal, old, ownerInstance, instance) {
      this.ready = newVal
    },
    playerDestroy(newVal, old, ownerInstance, instance) {
		console.log("playerDestroy")
      if (this.ready) {
        this.xgPlayer.destroy()
      }
    },
    initPlayer(newVal, old, ownerInstance, instance) {
		console.log(ownerInstance)
      if (newVal) {
        const _this = this
        // // #ifndef APP-PLUS
        // _this.xgPlayer = new Player({
        //   id: 'xgplayer',
        //   width: '100%',
        //   height: '100%',
        //   controlPlugins: [
        //     playError,
        //     playbackRate
        //   ],
        //   url: newVal,
        //   playsinline: true,
        //   playbackRate: [0.5, 0.75, 1, 1.5, 2],
        // })
        // // #endif

		// #ifdef APP-PLUS
		if (uni.getSystemInfoSync().platform == 'android') {
		  _this.xgPlayer = new HlsJsPlayer({
		    id: 'xgplayer',
		    width: '100%',
		    height: '100%',
		    controlPlugins: [
		      playError
		    ],
		    url: newVal,
		    playsinline: true,
		    playbackRate: [0.5, 0.75, 1, 1.5, 2],
		  })
		} else {
			_this.xgPlayer = new Player({
			  id: 'xgplayer',
			  width: '100%',
			  height: '100%',
			  controlPlugins: [
			    playError,
			    playbackRate
			  ],
			  url: newVal,
			  playsinline: true,
			  playbackRate: [0.5, 0.75, 1, 1.5, 2],
			})
		}
		// #endif
        _this.xgPlayer.on('controlShow', () => {
			if (ownerInstance) {
				ownerInstance.callMethod('controlShow', true)
			}
        })
        _this.xgPlayer.on('play', () => {
			_this.checkStatus()
        })
		_this.xgPlayer.on('playing', () => {
			_this.checkStatus()
		})
		_this.xgPlayer.on('pause', () => {
			_this.checkStatus()
		})
		_this.xgPlayer.on('ended', () => {
			_this.checkStatus()
        })
		_this.xgPlayer.on('timeupdate', () => {
			_this.checkStatus()
		})
		_this.xgPlayer.on('waiting', () => {
			_this.checkStatus()
		})
        _this.xgPlayer.once('ready', () => {
          _this.ready = true
		  if (ownerInstance) {
			ownerInstance.callMethod('playerReady', true)
		  }
        })
        _this.xgPlayer.once('destroy', () => {
          _this.ready = false
		  if (ownerInstance) {
			  ownerInstance.callMethod('playerReady', false)
		  }
        })
        _this.xgPlayer.on('error',(err)=>{
          console.log(err)
        })
      }
    }
  }
}
</script>
