<template>
    <div :style="{ height: props.videoHeight, paddingTop: 0 }" class="video_box">
        <template v-if="props.videoUrl">
            <div class="video_big">
                <div class="container" :id="'jessibuca-' + props.videoId"
                    :style="{ height: props.videoHeight, paddingTop: 0 }"></div>
            </div>
        </template>
        <template v-else>
            <div>暂无视频数据</div>
        </template>
    </div>
</template>

<script setup>
import { watchEffect } from "vue";
import { getCurrentInstance } from 'vue';
import { ref } from "vue";
import { nextTick } from 'vue';
import { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
    videoId: {
        type: [String, Number],
        default: "",
    },
    videoUrl: {
        type: String,
        default: "",
    },
    // 浏览器后台是否播放
    isBackPlay: {
        type: Boolean,
        default: true,
    },
    videoHeight: {
        type: String,
        default: "100px",
    },
});
const videoDom = ref(null);
const init = () => {
    createVideo();
};
// 创建视频
// 官方地址 http://jessibuca.monibuca.com/api.html#loadingtimeout-1
const createVideo = () => {
    nextTick(() => {
        videoDom.value = new window.Jessibuca({
            container: document.getElementById(`jessibuca-${props.videoId}`),
            videoBuffer: 0.2, // 缓存时长
            isResize: false, // 是否拉伸
            decoder: "/jessibuca/decoder.js",
            heartTimeoutReplay: 3, // 超时重连次数
            loadingText: "加载中,请稍后", // 加载提示
            showBandwidth: true, // 显示网速
            hiddenAutoPause: !props.isBackPlay, //浏览器后台是否播放
            supportDblclickFullscreen: true, //双击全屏
            controlAutoHide: true, // 控制栏自动隐藏
            operateBtns: {
                fullscreen: true,
                screenshot: true,
                play: false,
                audio: true,
            },
            forceNoOffscreen: true,
            isNotMute: false,
        });
        videoDom.value.on("load", () => {
            videoDom.value.play(props.videoUrl);
        });
        videoDom.value.on("error", (error) => {
            switch (error) {
                case "fetchError":
                    proxy.$modal.msgError("视频请求失败");
                    break;
                case "playError":
                    proxy.$modal.msgError("视频播放错误");
                    break;
                case "websocketError":
                    proxy.$modal.msgError("WebSocket 请求失败");
                    break;
                case "webcodecsH265NotSupport":
                    proxy.$modal.msgError("WebCodecs 解码 h265 失败");
                    break;
                case "mediaSourceH265NotSupport":
                    proxy.$modal.msgError("MediaSource 解码 h265 失败");
                    break;
                case "wasmDecodeError":
                    proxy.$modal.msgError(" wasm 解码失败");
                    break;
            }
        });
        videoDom.value.on("timeout", () => {
            proxy.$modal.msgError("视频请求超时");
        });
    });
};
// 销毁视频
const destroyVideo = () => {
    console.log("销毁视频");
    videoDom.value.destroy();
    videoDom.value = null;
};
watchEffect(() => {
    if (props.videoUrl) {
        init();
    }
});
onBeforeUnmount(() => {
    if (videoDom.value) {
        destroyVideo();
    }
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.video_box {
    width: 400px;
    height: 500px;
    /* 设置背景图片路径 */
    background-image: url("@/assets/images/television.png");
    /* 设置背景图片不重复 */
    background-repeat: no-repeat;
    /* 设置背景图片居中 */
    background-position: center;
    /* 设置元素的背景颜色 */
    background-color: #002b62;
    border-radius: 10px;
}
</style>