<template>
  <div class="active-game-page">
    <VapMp4Player
      v-model="backgroundVisible"
      class="vap-background"
      :src="src"
      mode="inline"
      fit="cover"
      :loop="true"
      :mute="true"
      :auto-close="false"
      :show-status="false"
      @error="handleVapError"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { showError } from '@/utils/toast.js'
import VapMp4Player from '@/components/VapMp4Player.vue'
import { preloadVapConfig } from '@/utils/vapMp4Config.js'
import { resolveProtectedAssetUrl } from '@/utils/protectedAssets.js'

const props = defineProps({
  src: {
    type: String,
    default: '',
  },
})

const backgroundVisible = ref(true)

function preloadVap() {
  if (!props.src) {
    return
  }

  preloadVapConfig(resolveProtectedAssetUrl(props.src))
}

function handleVapError(error) {
  console.error('VAP playback failed:', error)
  showError(error?.message || 'VAP playback failed')
}

onMounted(() => {
  preloadVap()
})
</script>

<style lang="scss" scoped>
.active-game-page {
  overflow: hidden;
}
</style>
