<template>
    <div class="video-flow-player">
        <video
            ref="videoElement"
            class="video-js vjs-default-skin"
            controls
            preload="auto"
            :width="props.width"
            :height="props.height"
            data-setup="{}"
        >
            <source v-if="props.src" :src="props.src" type="application/x-mpegURL" />
        </video>
    </div>
</template>
<script setup lang="ts" name="VideoFlowPlayer">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import videojs from 'video.js'
import '@videojs/http-streaming'
import 'video.js/dist/video-js.css'

interface Props {
    src: string
    width?: number | string
    height?: number | string
    autoplay?: boolean
    muted?: boolean
    fluid?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    width: 800,
    height: 450,
    autoplay: false,
    muted: false,
    fluid: true
})

const videoElement = ref<HTMLVideoElement>()
let player: any = null

const initPlayer = () => {
    if (videoElement.value && props.src) {
        player = videojs(
            videoElement.value,
            {
                fluid: props.fluid,
                responsive: true,
                autoplay: props.autoplay,
                muted: props.muted,
                width: props.width,
                height: props.height,
                loop: false,
                bigPlayButton: false,
                language: 'zh-CN',
                noSupportMessage: '此视频暂无法播放!',
                sources: [
                    {
                        src: props.src,
                        type: 'application/x-mpegURL'
                    }
                ],
                html5: {
                    hls: {
                        enableLowInitialPlaylist: true,
                        smoothQualityChange: true
                    },
                    nativeVideoTracks: false,
                    nativeAudioTracks: false,
                    nativeTextTracks: false
                }
            },
            () => {
                initializePlayerEvents()
            }
        )
    }
}

function initializePlayerEvents() {
    player.on('error', (e) => {
        console.error('播放器错误:', player.error())
    })
    player.on('loadstart', () => {
        console.log('开始加载视频')
    })
    player.on('loadedmetadata', () => {
        console.log('视频元数据加载完成')
    })
    player.on('canplay', () => {
        console.log('视频可以播放')
    })
}

const destroyPlayer = () => {
    if (player) {
        player.dispose()
        player = null
    }
}

onMounted(() => {
    // 确保DOM已渲染
    setTimeout(() => {
        initPlayer()
    }, 100)
})

onUnmounted(() => {
    destroyPlayer()
})

watch(
    () => props.src,
    () => {
        if (player && props.src) {
            player.src({
                src: props.src,
                type: 'application/x-mpegURL'
            })
        }
    }
)
</script>
<style lang="scss">
.video-flow-player {
    width: 100%;
    height: 100%;

    .video-js {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .vjs-tech {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: contain;
    }

    video {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
}
</style>
