<template>
	<div class="pi-video" ref="videoRef"></div>
</template>

<script setup>
import Player from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import {ref, watch, onMounted} from "vue";
import config from "@/config"

const prefix = config.API_URL + '/'
const videoRef = ref(null)
const props = defineProps({
	src: {type: String, required: true, default: ""},
	autoplay: {type: Boolean, default: false},
	controls: {type: Boolean, default: true},
	loop: {type: Boolean, default: false},
	isLive: {type: Boolean, default: false},
	options: {
		type: Object, default: () => {
		}
	}
})
let player = ref(null)

watch(() => props.src, (val) => {
	if (player.value.hasStart) {
		player.value.src = prefix + val
	} else {
		player.value.start(prefix + val)
	}
})

onMounted(() => {
	props.isLive ? initHls() : init()
})

function init() {
	player.value = new Player({
		el: videoRef.value,
		url: prefix + props.src,
		autoplay: props.autoplay,
		loop: props.loop,
		controls: props.controls,
		fluid: true,
		lang: 'zh-cn',
		...props.options
	})
}

function initHls() {
	player.value = new HlsPlayer({
		el: videoRef.value,
		url: prefix + props.src,
		autoplay: props.autoplay,
		loop: props.loop,
		controls: props.controls,
		fluid: true,
		isLive: true,
		ignores: ['time', 'progress'],
		lang: 'zh-cn',
		...props.options
	})
}

</script>

<style scoped>
.pi-video:deep(.danmu) > * {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
}

.pi-video:deep(.xgplayer-controls) {
	background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}

.pi-video:deep(.xgplayer-progress-tip) {
	border: 0;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	line-height: 25px;
	padding: 0 10px;
	border-radius: 25px;
}

.pi-video:deep(.xgplayer-enter-spinner) {
	width: 50px;
	height: 50px;
}
</style>
