up

src/components/ScreenPage.vue

@@ -212,6 +212,19 @@ async function prepareScreen() {
     message.warning('Полноэкранный режим недоступен в этом браузере')
   }
   prepared.value = true
+  await nextTick()
+  for (const media of [introAudioElement.value, conclusionVideoElement.value]) {
+    if (!media) continue
+    media.muted = true
+    try {
+      await media.play()
+      media.pause()
+      media.currentTime = 0
+      media.muted = !state.value?.soundEnabled
+    } catch {
+      mediaError.value = 'Браузер не разрешил подготовить воспроизведение на этом устройстве.'
+    }
+  }
 }
 
 onMounted(async () => {
@@ -272,21 +285,21 @@ onUnmounted(() => {
       </div>
       <div v-else class="screen-content" :style="screenBackground">
         <p v-if="mediaError" class="media-error">{{ mediaError }}</p>
-        <div v-if="screenMode === 'SCREEN_MODE_INTRO' && state.introAudio" class="screen-media">
+        <div v-if="state.introAudio" v-show="screenMode === 'SCREEN_MODE_INTRO'" class="screen-media">
           <audio ref="introAudioElement" :src="introAudio" :muted="!state.soundEnabled" controls />
         </div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION' && state.conclusionVideo" class="conclusion-screen">
+        <div v-if="state.conclusionVideo" v-show="screenMode === 'SCREEN_MODE_CONCLUSION'" class="conclusion-screen">
           <video ref="conclusionVideoElement" :src="conclusionVideo" :muted="!state.soundEnabled" playsinline />
         </div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION'" class="screen-message">Видео закрывашки не задано</div>
+        <div v-if="screenMode === 'SCREEN_MODE_CONCLUSION' && !state.conclusionVideo" class="screen-message">Видео закрывашки не задано</div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_INTRO_DONE'" class="screen-message">Успехов</div>
+        <div v-if="screenMode === 'SCREEN_MODE_INTRO_DONE'" class="screen-message">Успехов</div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION_DONE'" class="screen-message">Спасибо за игру!</div>
+        <div v-if="screenMode === 'SCREEN_MODE_CONCLUSION_DONE'" class="screen-message">Спасибо за игру!</div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_TEXT'" class="screen-message">{{ state.text }}</div>
+        <div v-if="screenMode === 'SCREEN_MODE_TEXT'" class="screen-message">{{ state.text }}</div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_TIMER'" class="timer-screen">
+        <div v-if="screenMode === 'SCREEN_MODE_TIMER'" class="timer-screen">
           <h1 class="timer-label">{{ state.timerLabel || 'Перерыв' }}</h1>
           <div class="timer-value">{{ timerDisplay }}</div>
         </div>
-        <div v-else-if="screenMode === 'SCREEN_MODE_RESULTS'" ref="resultsContainer" class="results-screen">
+        <div v-if="screenMode === 'SCREEN_MODE_RESULTS'" ref="resultsContainer" class="results-screen">
           <h1>Результаты</h1>
           <table>
             <thead><tr><th>Место</th><th>Команда</th><th v-for="question in resultQuestions" :key="question.code">{{ question.code }}</th><th>Сумма</th><th>Ходы</th></tr></thead>
@@ -303,7 +316,7 @@ onUnmounted(() => {
             </tbody>
           </table>
         </div>
-        <div v-else class="screen-cover">
+        <div v-if="screenMode === 'SCREEN_MODE_COVER'" class="screen-cover">
           <img v-if="state.coverImage" :src="state.coverImage" class="cover-image" alt="Обложка дела" />
           <div v-if="!prepared" class="cover-controls">
             <n-button type="primary" @click="prepareScreen">Подготовить экран</n-button>