<script setup lang="ts">
import { ref, onMounted } from 'vue'

const emit = defineEmits<{
  videoReady: [elA: HTMLVideoElement, elB: HTMLVideoElement]
}>()

const videoARef = ref<HTMLVideoElement | null>(null)
const videoBRef = ref<HTMLVideoElement | null>(null)

onMounted(() => {
  if (videoARef.value && videoBRef.value) {
    emit('videoReady', videoARef.value, videoBRef.value)
  }
})

defineExpose({ videoARef, videoBRef })
</script>

<template>
  <div class="game-player">
    <video ref="videoARef" class="player-video" preload="auto"></video>
    <video ref="videoBRef" class="player-video" preload="auto"></video>
  </div>
</template>

<style scoped>
.game-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.player-video {
  max-width: 100%;
  max-height: 100%;
  will-change: opacity;
}
</style>
