<template>
    <div class="player">
        <div class="player-text">
            {{ text }}
        </div>
        <LivePlayer alt=" " :live="true" :hide-big-play-button="true" :hide-stretch-button="true" :video-url="url" />
    </div>
</template>

<script lang="ts" setup>
import LivePlayer from '@liveqing/liveplayer-v3'

interface Props {
    text: string,
    url: string,
};

const props = withDefaults(defineProps<Props>(), {

});
</script>

<style lang="scss" scoped>
.player {
    width: 100%;
    height: 100%;
    position: relative;

    &-text {
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
}
</style>