update errors

src/components/ScreenPage.vue

@@ -20,6 +20,7 @@ const state = ref<ScreenState>()
 const games = ref<Game[]>([])
 const selectedGameId = ref<number | null>(null)
 const prepared = ref(false)
+const mediaError = ref('')
 const loading = ref(true)
 const binding = ref(false)
 const bindSuccess = ref(false)
@@ -108,7 +109,9 @@ watch(state, async (value) => {
     return
   } else if (value.command === 'SCREEN_COMMAND_PLAY' || value.command === 'SCREEN_COMMAND_RESUME' || value.command === 'SCREEN_COMMAND_REPLAY') {
     if (value.command === 'SCREEN_COMMAND_REPLAY') media.currentTime = 0
-    void media.play()
+    void media.play().catch(() => {
+      mediaError.value = 'Браузер заблокировал воспроизведение. Нажмите «Подготовить экран» на этом устройстве.'
+    })
   } else if (value.command === 'SCREEN_COMMAND_PAUSE') {
     media.pause()
   } else if (value.command === 'SCREEN_COMMAND_STOP') {
@@ -196,6 +199,7 @@ onUnmounted(() => {
         </n-card>
       </div>
       <div v-else class="screen-content">
+        <p v-if="mediaError" class="media-error">{{ mediaError }}</p>
         <div v-if="screenMode === 'SCREEN_MODE_INTRO' && state.introAudio" class="screen-media">
           <p class="media-title">Введение</p>
           <audio ref="introAudioElement" :src="introAudio" :muted="!state.soundEnabled" controls />
@@ -275,6 +279,18 @@ onUnmounted(() => {
   text-align: center;
 }
 
+.media-error {
+  background: #6b2d2d;
+  border-radius: 8px;
+  left: 20px;
+  margin: 0;
+  padding: 10px 14px;
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  z-index: 2;
+}
+
 .screen-cover {
   background: rgb(255 255 255 / 8%);
   border-radius: 16px;