<template>
    <div>
        <video
            v-if="propValue.isLive"
            :id="elID"
            :controls="propValue.controls"
            :loop="propValue.loop"
            :autoplay="propValue.autoplay"
            :muted="propValue.muted"
            class="v-video"
            :style="propValue.borderRadius !==0 ? 'border-radius: '+propValue.borderRadius+'rem;':''"
        />
        <video
            v-else
            :key="elID"
            :src="propValue.src"
            :controls="propValue.controls"
            :loop="propValue.loop"
            :autoplay="propValue.autoplay"
            :muted="propValue.muted"
            class="v-video"
            :style="propValue.borderRadius !==0 ? 'border-radius: '+propValue.borderRadius+'rem;':''"
        />
    </div>
</template>

<script>

import flvjs from 'flv.js'
import OnEvent from '../common/OnEvent'

export default {
    components: { },
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            flvPlayer: null,
            elID: Date.now().toString(),
            flvType: this.propValue.type,
            flvIsLive: this.propValue.isLive,
            flvSrc: this.propValue.src,
        }
    },
    watch: {
        propValue: {
            handler(newObject, oldObject) {
                if (this.flvIsLive) {
                    if (this.flvType !== newObject.type || this.flvIsLive !== newObject.isLive || this.flvSrc !== newObject.src) {
                        this.flvType = newObject.type
                        this.flvIsLive = newObject.isLive
                        this.flvSrc = newObject.src
                        this.reRender()
                    }
                } else {
                    this.elID = Date.now().toString()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        this.$nextTick(() => {
            if (this.propValue.isLive) {
                this.createVideo()
            }
        })
    },
    beforeDestroy() {
        this.destroyVideo()
    },
    methods: {
        createVideo() {
            if (flvjs.isSupported()) {
                let videoElement = document.getElementById(this.elID)
                this.flvPlayer = flvjs.createPlayer({
                    type: this.flvType,
                    isLive: this.flvIsLive,
                    cors: true,
                    hasAudio: true,
                    url: this.flvSrc, // 你的url地址
                    enableWorker: true, // 是否多线程工作
                    enableStashBuffer: false, // 是否启用缓存
                    stashInitialSize: 0, // 缓存大小(kb)  默认384kb
                    autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理缓存
                    autoCleanupMaxBackwardDuration: 20, //    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
                    autoCleanupMinBackwardDuration: 20, // 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
                })
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },
        destroyVideo() {
            if (this.flvPlayer !== null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }
        },
        reRender() {
            this.destroyVideo()
            this.createVideo()
        },
    },
}
</script>

<style lang="scss" scoped>
.v-video {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}
</style>
