import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'

/**
 * @description flv视频播放组件
 *  关闭时需要销毁组件来停止 视频的 播放
 */
export const VideoPlayerTsx = defineComponent({
  name: 'video-player-tsx',
  props: {
    videoUrl: {
      type: String,
      default: '/rts/hdl/live/test.flv'
    }
  },
  setup (props, ctx) {
    const videoPlay = ref()
    const videoElementRef = ref()

    const mediaDataSource = reactive({
      type: 'flv',
      url: props.videoUrl
    })

    const createPlayer = () => {
      videoPlay.value = window.flvjs.createPlayer(mediaDataSource, {
        enableWorker: false,
        lazyLoadMaxDuration: 3 * 60,
        seekType: 'range'
      })

      videoPlay.value.attachMediaElement(document.getElementById('videoPlay'))
      videoPlay.value.load()
    }

    onMounted(() => {
      createPlayer()
    })

    onUnmounted(() => {
      videoPlay.value.destroy()
    })

    return () => (
      <video ref={videoElementRef.value} id='videoPlay' class="centeredVideo" controls autoplay>
          Your browser is too old which doesn't support HTML5 video.
      </video>
    )
  }
})
