From 7ba92c81e95b398c3da2254f041966a71f9842e4 Mon Sep 17 00:00:00 2001
From: empty <let5sne.mac@gmail.com>
Date: Sun, 25 Jan 2026 22:35:50 +0800
Subject: [PATCH] fix: add audio unlock overlay for browser autoplay policy

- Add click-to-unlock overlay on big screen
- Play silent audio to unlock browser audio context
- Show unlock prompt before allowing audio playback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/client-screen/src/App.vue | 50 ++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/client-screen/src/App.vue b/packages/client-screen/src/App.vue
index 0a900f2..907b474 100644
--- a/packages/client-screen/src/App.vue
+++ b/packages/client-screen/src/App.vue
@@ -7,6 +7,7 @@ const router = useRouter();
 const route = useRoute();
 const displayStore = useDisplayStore();
 const isFullscreen = ref(false);
+const audioUnlocked = ref(false);
 
 // Mode to route mapping
 const modeRoutes: Record<string, string> = {
@@ -16,6 +17,20 @@ const modeRoutes: Record<string, string> = {
   'results': '/screen/results',
 };
 
+// Unlock audio playback (required by browser autoplay policy)
+function unlockAudio() {
+  // Create and play a silent audio to unlock
+  const silentAudio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAABhgC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAAYYoRwmHAAAAAAD/+1DEAAAGAAGn9AAAIgAANP8AAABM');
+  silentAudio.play().then(() => {
+    audioUnlocked.value = true;
+    console.log('[App] Audio unlocked');
+  }).catch(() => {
+    // Still mark as unlocked - user interaction happened
+    audioUnlocked.value = true;
+    console.log('[App] Audio unlock attempted');
+  });
+}
+
 function toggleFullscreen() {
   if (!document.fullscreenElement) {
     document.documentElement.requestFullscreen();
@@ -58,6 +73,14 @@ onUnmounted(() => {
 
 <template>
   <div class="screen-app" @dblclick="toggleFullscreen">
+    <!-- Audio unlock overlay -->
+    <div v-if="!audioUnlocked" class="audio-unlock-overlay" @click="unlockAudio">
+      <div class="unlock-content">
+        <div class="unlock-icon">🔊</div>
+        <div class="unlock-text">点击屏幕启用音频</div>
+      </div>
+    </div>
+
     <router-view />
 
     <!-- Fullscreen hint -->
@@ -135,4 +158,31 @@ onUnmounted(() => {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
+
+.audio-unlock-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  cursor: pointer;
+}
+
+.unlock-content {
+  text-align: center;
+  color: white;
+}
+
+.unlock-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+  animation: pulse 2s infinite;
+}
+
+.unlock-text {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.8);
+}
 </style>