add video and audio

src/components/ScreenPage.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router'
 import { getAuthClient } from '@/api/auth_client'
 import type { Game, ScreenState } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import { applicationFileURL } from '@/utils/application'
 import { formatGameDateTime } from '@/utils/datetime'
 
 const sessionKey = 'evening-detective-screen-session'
@@ -39,6 +40,8 @@ const gameOptions = computed(() =>
   })),
 )
 const screenMode = computed(() => state.value?.mode || 'SCREEN_MODE_COVER')
+const introAudio = computed(() => applicationFileURL(state.value?.introAudio))
+const conclusionVideo = computed(() => applicationFileURL(state.value?.conclusionVideo))
 
 function saveSession() {
   sessionStorage.setItem(sessionKey, JSON.stringify({ screenId: screenId.value, accessToken: accessToken.value }))
@@ -168,7 +171,14 @@ onUnmounted(() => {
         </n-card>
       </div>
       <div v-else class="screen-content">
-        <div v-if="screenMode === 'SCREEN_MODE_INTRO_DONE'" class="screen-message">Успехов</div>
+        <div v-if="screenMode === 'SCREEN_MODE_INTRO' && state.introAudio" class="screen-media">
+          <p class="media-title">Введение</p>
+          <audio :src="introAudio" :muted="!state.soundEnabled" autoplay controls />
+        </div>
+        <div v-else-if="screenMode === 'SCREEN_MODE_CONCLUSION' && state.conclusionVideo" class="screen-media">
+          <video :src="conclusionVideo" :muted="!state.soundEnabled" autoplay controls playsinline />
+        </div>
+        <div v-else-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-else class="screen-cover">
           <img v-if="state.coverImage" :src="state.coverImage" class="cover-image" alt="Обложка дела" />
@@ -263,4 +273,19 @@ onUnmounted(() => {
   font-size: clamp(42px, 10vw, 140px);
   font-weight: 700;
 }
+
+.screen-media {
+  max-width: 90vw;
+  width: 900px;
+}
+
+.screen-media audio,
+.screen-media video {
+  max-height: 75dvh;
+  width: 100%;
+}
+
+.media-title {
+  font-size: 32px;
+}
 </style>