Fix multiplayer responsiveness for viewer

src/App.vue

@@ -540,22 +540,6 @@ export default {
       const socket = new WebSocket(wsUrl)
       this.socket = socket
 
-      await new Promise<void>((resolve, reject) => {
-        socket.onopen = () => {
-          if (this.socket !== socket) return
-          this.socketConnected = true
-          this.syncError = ''
-          if (this.isHost) this.publishState()
-          resolve()
-        }
-        socket.onerror = () => {
-          if (this.socket !== socket) return
-          this.socketConnected = false
-          this.syncError = 'Realtime connection failed'
-          reject(new Error('Realtime connection failed'))
-        }
-      }).catch(() => {})
-
       socket.onmessage = async (event) => {
         let message: RealtimeMessage | null = null
         try {
@@ -574,6 +558,22 @@ export default {
           this.socketConnected = false
         }
       }
+
+      await new Promise<void>((resolve, reject) => {
+        socket.onopen = () => {
+          if (this.socket !== socket) return
+          this.socketConnected = true
+          this.syncError = ''
+          if (this.isHost) this.publishState()
+          resolve()
+        }
+        socket.onerror = () => {
+          if (this.socket !== socket) return
+          this.socketConnected = false
+          this.syncError = 'Realtime connection failed'
+          reject(new Error('Realtime connection failed'))
+        }
+      }).catch(() => {})
     },
     buildRealtimeState(): RealtimeState {
       return {
@@ -611,6 +611,7 @@ export default {
         this.queuedRemoteState = state
         return
       }
+      const previousClipUrl = this.currentClipUrl
       this.isApplyingRemote = true
       try {
         const selected = state.selectedGameName
@@ -628,6 +629,38 @@ export default {
       } finally {
         this.isApplyingRemote = false
       }
+      await nextTick()
+      this.syncRemotePlayback(previousClipUrl !== this.currentClipUrl)
+    },
+    getCurrentTileStatus() {
+      if (!this.currentTileKey) return 'available'
+      return this.tiles[this.currentTileKey]?.status || 'available'
+    },
+    syncRemotePlayback(forceReload: boolean) {
+      if (this.canControlGame) return
+      const player = this.getPlayer()
+      if (!player) return
+      const tileStatus = this.getCurrentTileStatus()
+
+      if (!this.currentClipUrl || tileStatus === 'won' || tileStatus === 'void') {
+        player.pause()
+        return
+      }
+
+      if (forceReload) {
+        player.currentTime = 0
+        player.load()
+      }
+
+      if (tileStatus === 'paused') {
+        player.pause()
+        return
+      }
+
+      if (tileStatus === 'playing' || tileStatus === 'guessed') {
+        this.ensureAudioContext()
+        player.play().catch(() => {})
+      }
     },
     getPlayer() {
       return this.$refs.player as HTMLAudioElement | undefined