<template>
  <router-view />
  <GlobalAlert />
  <BroadcastOverlay />
  <!-- 隐藏的静音音频，用于解锁浏览器自动播放权限 -->
  <audio ref="audioUnlocker" style="display:none" muted playsinline></audio>
</template>

<script setup>
import GlobalAlert from '@/components/GlobalAlert.vue'
import BroadcastOverlay from '@/components/BroadcastOverlay.vue'
import { ref, onMounted } from 'vue'

const audioUnlocker = ref(null)

// 解锁浏览器音频自动播放权限
const unlockAudio = () => {
  if (audioUnlocker.value) {
    audioUnlocker.value.play().then(() => {
      console.log('[App] 音频播放权限已解锁')
    }).catch(() => {
      // 静默失败
    })
  }
  // 移除监听，只需解锁一次
  document.removeEventListener('click', unlockAudio)
  document.removeEventListener('touchstart', unlockAudio)
  document.removeEventListener('keydown', unlockAudio)
}

onMounted(() => {
  // 监听用户首次交互来解锁音频权限
  document.addEventListener('click', unlockAudio, { once: true })
  document.addEventListener('touchstart', unlockAudio, { once: true })
  document.addEventListener('keydown', unlockAudio, { once: true })
})
</script>

<style>
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
