<template>
  <div class="video-player-container">
    <VideoPlayer
      ref="videoRef"
      :options="videoOptions"
      crossorigin="anonymous"
          playsinline
      :class="['video-player', 'vjs-big-play-centered', { loading: !state }]"
      @mounted="handleMounted"
    />
  </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)
const player = ref(null)
const state = ref(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'),
  userActions: {
    hotkeys: true,
    doubleClick: true
  },
  controlBar: {
    progressControl: {
      seekBar: {
        mouseTimeDisplay: {
          keepTooltipsInside: true
        }
      }
    }
  },
  ...props.options
}))

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

const handleMounted = (payload) => {
  console.log('Advanced player mounted', payload)
  state.value = payload.state
  player.value = payload.player
}

onBeforeUnmount(() => {
  if (videoRef.value?.$player) {
    videoRef.value.$player.dispose()
  }
})

defineExpose({
  pause() {
    if (videoRef.value?.$player) {
      videoRef.value.$player.pause()
    }
  }
})
</script>

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