<template>
  <div class="video-player-container">
    <VideoPlayer
      ref="videoRef"
      :options="videoOptions"
      @ready="onPlayerReady"
      controls
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const props = defineProps({
  options: {
    type: Object,
    required: false,
    default: () => ({})
  },
  videoUrl: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['onPlay', 'onPause'])
const videoRef = ref(null)
let player = null

const videoOptions = computed(() => ({
  fluid: true,
  controls: true,
  preload: 'auto',
  responsive: true,
  autoplay: props.options?.autoplay || false,
  sources: [{
    src: props.videoUrl,
    type: 'video/mp4'
  }],
  onPlay: () => emit('onPlay'),
  onPause: () => emit('onPause'),
  ...props.options
}))

const onPlayerReady = (instance) => {
  player = instance
}

onBeforeUnmount(() => {
  if (player) {
    player.dispose()
  }
})

defineExpose({
  pause() {
    if (player) {
      player.pause()
    }
  }
})
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>