up

src/components/GameMapPanel.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { NButton, NFlex, NSpace, NText } from 'naive-ui'
+import { NButton, NFlex, NInput, NInputNumber, NSelect, NSpace, NText } from 'naive-ui'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
 import type {
   Application,
   MapItem,
   ResultsQuestion,
+  ScreenCommand,
+  ScreenMode,
+  ScreenPlan,
+  ScreenPlanStep,
   ScreenState,
   Team,
   TeamResult,
@@ -18,11 +22,30 @@ const props = defineProps<{
   screens: ScreenState[]
   previewQuestions: ResultsQuestion[]
   previewTeams: TeamResult[]
+  screenPlan?: ScreenPlan
+  screenPlanDraft: ScreenPlanStep[]
+  screenPlanDirty: boolean
+  screenPlanSaving: boolean
+  screenPlanMode: 'use' | 'edit'
+  screenVolume: number
+  screenPosition: number
 }>()
 
 const emit = defineEmits<{
   saveItem: [item: MapItem, hidden?: boolean]
   giveApplication: [team: Team, application: Application]
+  addStep: []
+  edit: []
+  cancel: []
+  removeStep: [index: number]
+  moveStep: [index: number, offset: number]
+  dirty: []
+  clearPlan: []
+  save: []
+  setStep: [index: number]
+  command: [mode: ScreenMode | undefined, command: ScreenCommand]
+  'update:screenVolume': [value: number | null]
+  'update:screenPosition': [value: number | null]
 }>()
 
 const mapScale = ref(1)
@@ -34,6 +57,16 @@ const teamsNeedingApplications = computed(
   () =>
     new Map(props.teams.filter((team) => team.applications?.length).map((team) => [team.ID, team])),
 )
+const screenPlanModeOptions = [
+  { label: 'Обложка', value: 'SCREEN_MODE_COVER' },
+  { label: 'Введение', value: 'SCREEN_MODE_INTRO' },
+  { label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
+  { label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
+  { label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
+  { label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
+  { label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
+  { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
+]
 let dragState:
   { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
 let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
@@ -211,6 +244,210 @@ onBeforeUnmount(() => {
         :teams="previewTeams"
       />
       <div v-else class="screen-preview-placeholder">Экран не подключён</div>
+      <div class="screen-plan">
+        <n-flex align="center" justify="space-between">
+          <p class="screens-title">План экранов</p>
+          <n-space>
+            <n-button
+              v-if="!screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('addStep')"
+            >
+              Создать план
+            </n-button>
+            <n-button
+              v-if="screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('edit')"
+            >
+              Редактировать
+            </n-button>
+            <template v-if="screenPlanMode === 'edit'">
+              <n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')">
+                Отменить
+              </n-button>
+              <n-button
+                size="small"
+                type="primary"
+                :loading="screenPlanSaving"
+                :disabled="screenPlanSaving"
+                @click="emit('save')"
+              >
+                Сохранить план
+              </n-button>
+            </template>
+          </n-space>
+        </n-flex>
+        <p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">
+          План экранов ещё не создан.
+        </p>
+        <template v-else-if="screenPlanMode === 'edit'">
+          <n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
+            <n-text>{{ index + 1 }}</n-text>
+            <n-select
+              v-model:value="step.mode"
+              :options="screenPlanModeOptions"
+              :disabled="screenPlanSaving"
+              size="small"
+              style="width: 180px"
+              @update:value="emit('dirty')"
+            />
+            <n-input
+              v-if="step.mode === 'SCREEN_MODE_TEXT'"
+              v-model:value="step.text"
+              :disabled="screenPlanSaving"
+              size="small"
+              placeholder="Текст экрана"
+              style="min-width: 240px"
+              @update:value="emit('dirty')"
+            />
+            <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+              <n-input
+                v-model:value="step.timerLabel"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Надпись таймера"
+                @update:value="emit('dirty')"
+              />
+              <n-input-number
+                v-model:value="step.timerDurationSeconds"
+                :min="1"
+                :max="86400"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Секунды"
+                @update:value="emit('dirty')"
+              />
+            </template>
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === 0"
+              @click="emit('moveStep', index, -1)"
+            >
+              ↑
+            </n-button>
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
+              @click="emit('moveStep', index, 1)"
+            >
+              ↓
+            </n-button>
+            <n-button
+              size="small"
+              type="error"
+              ghost
+              :disabled="screenPlanSaving"
+              @click="emit('removeStep', index)"
+            >
+              Удалить
+            </n-button>
+          </n-space>
+          <n-space>
+            <n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')">
+              Добавить шаг
+            </n-button>
+            <n-button
+              v-if="screenPlanDraft.length"
+              size="small"
+              :disabled="screenPlanSaving"
+              @click="emit('clearPlan')"
+            >
+              Удалить план
+            </n-button>
+          </n-space>
+        </template>
+        <template v-else-if="screenPlan">
+          <n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
+            <n-text>{{ index + 1 }}</n-text>
+            <n-text>
+              {{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
+              <template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
+              <template v-else-if="step.mode === 'SCREEN_MODE_TIMER'">
+                : {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)
+              </template>
+            </n-text>
+            <n-button
+              size="small"
+              :type="screenPlan.currentStep === index ? 'primary' : 'default'"
+              :disabled="screenPlan.currentStep === index"
+              @click="emit('setStep', index)"
+            >
+              Показать
+            </n-button>
+            <template v-if="screenPlan.currentStep === index">
+              <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
+                >
+                  Старт
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
+                >
+                  Пауза
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
+                >
+                  Продолжить
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
+                >
+                  Сбросить
+                </n-button>
+              </template>
+              <template
+                v-else-if="
+                  step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
+                "
+              >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')">
+                  Запуск
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')">
+                  Пауза
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')">
+                  Продолжить
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')">
+                  Стоп
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')">
+                  Повтор
+                </n-button>
+                <n-input-number
+                  :value="screenVolume"
+                  :min="0"
+                  :max="100"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenVolume', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')">
+                  Громкость
+                </n-button>
+                <n-input-number
+                  :value="screenPosition"
+                  :min="0"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenPosition', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')">
+                  Перемотать
+                </n-button>
+              </template>
+            </template>
+          </n-space>
+        </template>
+      </div>
     </aside>
   </div>
 </template>
@@ -247,10 +484,11 @@ onBeforeUnmount(() => {
 }
 
 .map-field {
+  aspect-ratio: 1;
   background-color: #151515;
   border: 1px dashed rgb(255 255 255 / 20%);
   cursor: grab;
-  height: 420px;
+  height: auto;
   min-height: 200px;
   overflow: hidden;
   position: relative;

src/components/GamePage.vue

@@ -12,6 +12,8 @@ import {
   NRate,
   NSelect,
   NSpace,
+  NTabPane,
+  NTabs,
   NText,
 } from 'naive-ui'
 import { useMessage } from 'naive-ui'
@@ -52,6 +54,20 @@ const isDownloadingQR = ref(false)
 const router = useRouter()
 const route = useRoute()
 const gameId = route.params.id
+type GameTab = 'game' | 'teams' | 'screens-map'
+
+function isGameTab(value: string): value is GameTab {
+  return ['game', 'teams', 'screens-map'].includes(value)
+}
+
+const queryTab = typeof route.query.tab === 'string' ? route.query.tab : ''
+const activeTab = ref<GameTab>(isGameTab(queryTab) ? queryTab : 'game')
+
+async function setActiveTab(value: string) {
+  if (!isGameTab(value)) return
+  activeTab.value = value
+  await router.replace({ query: { ...route.query, tab: value } })
+}
 
 const message = useMessage()
 
@@ -680,127 +696,137 @@ useSimplePolling(() => {
 <template>
   <div class="center-block-custom">
     <div class="width1200">
-      <div class="settings-block">
-        <n-flex justify="space-between">
-          <n-space>
-            <n-tag :bordered="false" type="info"> Участвуют команд: {{ activeTeamCount }} </n-tag>
-            <n-tag type="info">
-              {{ timeString }}
-            </n-tag>
-            <n-tag v-if="formatGameDateTime(game.startAt)" type="info">
-              Начало: {{ formatGameDateTime(game.startAt) }}
-            </n-tag>
-          </n-space>
+      <n-tabs :value="activeTab" type="line" animated @update:value="setActiveTab">
+        <n-tab-pane name="game" tab="Игра">
+          <div class="settings-block">
+            <n-flex justify="space-between">
+              <n-space>
+                <n-tag :bordered="false" type="info">
+                  Участвуют команд: {{ activeTeamCount }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ timeString }}
+                </n-tag>
+                <n-tag v-if="formatGameDateTime(game.startAt)" type="info">
+                  Начало: {{ formatGameDateTime(game.startAt) }}
+                </n-tag>
+              </n-space>
 
-          <n-flex justify="end">
-            <n-button quaternary @click="openQR(url, 'Админка')"> QR </n-button>
-            <n-button quaternary @click="openIssueTickets()"> Выпустить билеты </n-button>
-            <n-button quaternary @click="openAnswersModal()"> Ответы команд </n-button>
-            <n-button v-if="game.status == 'finish'" quaternary @click="toResults()">
-              <Icon class="settings-icon">
-                <Trophy />
-              </Icon>
-              Итоги
-            </n-button>
-            <n-button
-              v-if="activeTeamCount"
-              quaternary
-              :loading="isDownloadingQR"
-              :disabled="isDownloadingQR"
-              @click="downloadTeamQR()"
-            >
-              QR команд
-            </n-button>
-            <n-button quaternary @click="openSettings()">
-              <Icon class="settings-icon">
-                <Settings />
-              </Icon>
-              Настройки
-            </n-button>
-            <n-button
-              v-if="(game.teams?.length || 0) == 0"
-              type="error"
-              quaternary
-              @click="showDeleteGameModal = true"
-            >
-              Удалить игру
-            </n-button>
+              <n-flex justify="end">
+                <n-button quaternary @click="openQR(url, 'Админка')"> QR </n-button>
+                <n-button quaternary @click="openIssueTickets()"> Выпустить билеты </n-button>
+                <n-button quaternary @click="openAnswersModal()"> Ответы команд </n-button>
+                <n-button v-if="game.status == 'finish'" quaternary @click="toResults()">
+                  <Icon class="settings-icon">
+                    <Trophy />
+                  </Icon>
+                  Итоги
+                </n-button>
+                <n-button
+                  v-if="activeTeamCount"
+                  quaternary
+                  :loading="isDownloadingQR"
+                  :disabled="isDownloadingQR"
+                  @click="downloadTeamQR()"
+                >
+                  QR команд
+                </n-button>
+                <n-button quaternary @click="openSettings()">
+                  <Icon class="settings-icon">
+                    <Settings />
+                  </Icon>
+                  Настройки
+                </n-button>
+                <n-button
+                  v-if="(game.teams?.length || 0) == 0"
+                  type="error"
+                  quaternary
+                  @click="showDeleteGameModal = true"
+                >
+                  Удалить игру
+                </n-button>
 
-            <n-space>
-              <n-button type="info" v-if="game.status != 'draft'" dashed @click="resetGame()">
-                <Icon>
-                  <Reset />
-                </Icon>
-              </n-button>
-              <n-button type="info" v-if="game.status == 'draft'" dashed @click="startGame()">
-                <Icon>
-                  <Play />
-                </Icon>
-              </n-button>
-              <n-button type="info" v-if="game.status == 'pause'" dashed @click="playGame()">
-                <Icon>
-                  <Play />
-                </Icon>
-              </n-button>
-              <n-button type="info" v-if="game.status == 'run'" dashed @click="pauseGame()">
-                <Icon>
-                  <Pause />
-                </Icon>
-              </n-button>
-              <n-button type="info" v-if="game.status != 'finish'" dashed @click="finishGame()">
-                <Icon>
-                  <Flag />
-                </Icon>
-              </n-button>
-            </n-space>
-          </n-flex>
-        </n-flex>
-      </div>
-
-      <GameScreensPanel
-        :screens="screens"
-        :screen-plan="screenPlan"
-        :screen-plan-draft="screenPlanDraft"
-        :screen-plan-dirty="screenPlanDirty"
-        :screen-plan-saving="screenPlanSaving"
-        :screen-plan-mode="screenPlanMode"
-        :screen-volume="screenVolume"
-        :screen-position="screenPosition"
-        :screen-binding="screenBinding"
-        @bind="bindScannedScreen"
-        @set-sound="setSoundScreen"
-        @unbind="unbindScreen"
-        @add-step="addScreenPlanStep"
-        @edit="editScreenPlan"
-        @cancel="cancelScreenPlanEdit"
-        @remove-step="removeScreenPlanStep"
-        @move-step="moveScreenPlanStep"
-        @dirty="markScreenPlanDirty"
-        @clear-plan="clearScreenPlan"
-        @save="saveScreenPlan"
-        @set-step="setScreenPlanStep"
-        @command="sendScreenPlanCommand"
-        @update:screen-volume="screenVolume = $event ?? 0"
-        @update:screen-position="screenPosition = $event ?? 0"
-      />
-      <GameMapPanel
-        :map-items="mapItems"
-        :teams="game.teams || []"
-        :screens="screens"
-        :preview-questions="previewQuestions"
-        :preview-teams="previewTeams"
-        @save-item="saveMapItemAndReload"
-        @give-application="giveApplication"
-      />
-      <GameTeamsPanel
-        :teams="game.teams || []"
-        :participation-options="participationOptions"
-        @add="showAddTeamModal = true"
-        @open-qr="openTeamQR"
-        @preview="(id, password) => toTeamStory(id, password, true)"
-        @delete="deleteTeam"
-        @give-application="giveApplication"
-      />
+                <n-space>
+                  <n-button type="info" v-if="game.status != 'draft'" dashed @click="resetGame()">
+                    <Icon>
+                      <Reset />
+                    </Icon>
+                  </n-button>
+                  <n-button type="info" v-if="game.status == 'draft'" dashed @click="startGame()">
+                    <Icon>
+                      <Play />
+                    </Icon>
+                  </n-button>
+                  <n-button type="info" v-if="game.status == 'pause'" dashed @click="playGame()">
+                    <Icon>
+                      <Play />
+                    </Icon>
+                  </n-button>
+                  <n-button type="info" v-if="game.status == 'run'" dashed @click="pauseGame()">
+                    <Icon>
+                      <Pause />
+                    </Icon>
+                  </n-button>
+                  <n-button type="info" v-if="game.status != 'finish'" dashed @click="finishGame()">
+                    <Icon>
+                      <Flag />
+                    </Icon>
+                  </n-button>
+                </n-space>
+              </n-flex>
+            </n-flex>
+          </div>
+        </n-tab-pane>
+        <n-tab-pane name="teams" tab="Команды">
+          <n-tag :bordered="false" type="info"> Участвуют команд: {{ activeTeamCount }} </n-tag>
+          <GameTeamsPanel
+            :teams="game.teams || []"
+            :participation-options="participationOptions"
+            @add="showAddTeamModal = true"
+            @open-qr="openTeamQR"
+            @preview="(id, password) => toTeamStory(id, password, true)"
+            @delete="deleteTeam"
+            @give-application="giveApplication"
+          />
+        </n-tab-pane>
+        <n-tab-pane name="screens-map" tab="Экраны и карта">
+          <GameScreensPanel
+            :screens="screens"
+            :screen-binding="screenBinding"
+            @bind="bindScannedScreen"
+            @set-sound="setSoundScreen"
+            @unbind="unbindScreen"
+          />
+          <GameMapPanel
+            :map-items="mapItems"
+            :teams="game.teams || []"
+            :screens="screens"
+            :preview-questions="previewQuestions"
+            :preview-teams="previewTeams"
+            :screen-plan="screenPlan"
+            :screen-plan-draft="screenPlanDraft"
+            :screen-plan-dirty="screenPlanDirty"
+            :screen-plan-saving="screenPlanSaving"
+            :screen-plan-mode="screenPlanMode"
+            :screen-volume="screenVolume"
+            :screen-position="screenPosition"
+            @save-item="saveMapItemAndReload"
+            @give-application="giveApplication"
+            @add-step="addScreenPlanStep"
+            @edit="editScreenPlan"
+            @cancel="cancelScreenPlanEdit"
+            @remove-step="removeScreenPlanStep"
+            @move-step="moveScreenPlanStep"
+            @dirty="markScreenPlanDirty"
+            @clear-plan="clearScreenPlan"
+            @save="saveScreenPlan"
+            @set-step="setScreenPlanStep"
+            @command="sendScreenPlanCommand"
+            @update:screen-volume="screenVolume = $event ?? 0"
+            @update:screen-position="screenPosition = $event ?? 0"
+          />
+        </n-tab-pane>
+      </n-tabs>
     </div>
   </div>
 

src/components/GameScreensPanel.vue

@@ -1,35 +1,12 @@
 <script setup lang="ts">
-import {
-  NAlert,
-  NButton,
-  NFlex,
-  NInput,
-  NInputNumber,
-  NSelect,
-  NSpace,
-  NTag,
-  NText,
-} from 'naive-ui'
+import { NAlert, NButton, NFlex, NTag } from 'naive-ui'
 import { ref } from 'vue'
 
-import type {
-  ScreenCommand,
-  ScreenMode,
-  ScreenPlan,
-  ScreenPlanStep,
-  ScreenState,
-} from '@/api/generated/crabs/evening_detective_server'
+import type { ScreenState } from '@/api/generated/crabs/evening_detective_server'
 import ScreenBindingModal from '@/components/ScreenBindingModal.vue'
 
 const props = defineProps<{
   screens: ScreenState[]
-  screenPlan?: ScreenPlan
-  screenPlanDraft: ScreenPlanStep[]
-  screenPlanDirty: boolean
-  screenPlanSaving: boolean
-  screenPlanMode: 'use' | 'edit'
-  screenVolume: number
-  screenPosition: number
   screenBinding: boolean
 }>()
 
@@ -37,32 +14,9 @@ const emit = defineEmits<{
   bind: [screenID: string, accessToken: string]
   setSound: [screen: ScreenState]
   unbind: [screen: ScreenState]
-  addStep: []
-  edit: []
-  cancel: []
-  removeStep: [index: number]
-  moveStep: [index: number, offset: number]
-  dirty: []
-  clearPlan: []
-  save: []
-  setStep: [index: number]
-  command: [mode: ScreenMode | undefined, command: ScreenCommand]
-  'update:screenVolume': [value: number | null]
-  'update:screenPosition': [value: number | null]
 }>()
 
 const showBindingModal = ref(false)
-
-const screenPlanModeOptions = [
-  { label: 'Обложка', value: 'SCREEN_MODE_COVER' },
-  { label: 'Введение', value: 'SCREEN_MODE_INTRO' },
-  { label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
-  { label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
-  { label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
-  { label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
-  { label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
-  { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
-]
 </script>
 
 <template>
@@ -93,206 +47,11 @@ const screenPlanModeOptions = [
         <n-flex justify="end">
           <n-tag v-if="screen.soundEnabled" type="success">Со звуком</n-tag>
           <n-button v-else size="small" @click="emit('setSound', screen)">Назначить звук</n-button>
-          <n-button size="small" type="error" ghost @click="emit('unbind', screen)"
-            >Отвязать</n-button
-          >
+          <n-button size="small" type="error" ghost @click="emit('unbind', screen)">
+            Отвязать
+          </n-button>
         </n-flex>
       </div>
-      <div class="screen-plan">
-        <n-flex align="center" justify="space-between">
-          <p class="screens-title">План экранов</p>
-          <n-space>
-            <n-button
-              v-if="!screenPlan && screenPlanMode === 'use'"
-              size="small"
-              @click="emit('addStep')"
-            >
-              Создать план
-            </n-button>
-            <n-button
-              v-if="screenPlan && screenPlanMode === 'use'"
-              size="small"
-              @click="emit('edit')"
-            >
-              Редактировать
-            </n-button>
-            <template v-if="screenPlanMode === 'edit'">
-              <n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')"
-                >Отменить</n-button
-              >
-              <n-button
-                size="small"
-                type="primary"
-                :loading="screenPlanSaving"
-                :disabled="screenPlanSaving"
-                @click="emit('save')"
-              >
-                Сохранить план
-              </n-button>
-            </template>
-          </n-space>
-        </n-flex>
-        <p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">
-          План экранов ещё не создан.
-        </p>
-        <template v-else-if="screenPlanMode === 'edit'">
-          <n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
-            <n-text>{{ index + 1 }}</n-text>
-            <n-select
-              v-model:value="step.mode"
-              :options="screenPlanModeOptions"
-              :disabled="screenPlanSaving"
-              size="small"
-              style="width: 180px"
-              @update:value="emit('dirty')"
-            />
-            <n-input
-              v-if="step.mode === 'SCREEN_MODE_TEXT'"
-              v-model:value="step.text"
-              :disabled="screenPlanSaving"
-              size="small"
-              placeholder="Текст экрана"
-              style="min-width: 240px"
-              @update:value="emit('dirty')"
-            />
-            <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
-              <n-input
-                v-model:value="step.timerLabel"
-                :disabled="screenPlanSaving"
-                size="small"
-                placeholder="Надпись таймера"
-                @update:value="emit('dirty')"
-              />
-              <n-input-number
-                v-model:value="step.timerDurationSeconds"
-                :min="1"
-                :max="86400"
-                :disabled="screenPlanSaving"
-                size="small"
-                placeholder="Секунды"
-                @update:value="emit('dirty')"
-              />
-            </template>
-            <n-button
-              size="small"
-              :disabled="screenPlanSaving || index === 0"
-              @click="emit('moveStep', index, -1)"
-              >↑</n-button
-            >
-            <n-button
-              size="small"
-              :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
-              @click="emit('moveStep', index, 1)"
-              >↓</n-button
-            >
-            <n-button
-              size="small"
-              type="error"
-              ghost
-              :disabled="screenPlanSaving"
-              @click="emit('removeStep', index)"
-              >Удалить</n-button
-            >
-          </n-space>
-          <n-space>
-            <n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')"
-              >Добавить шаг</n-button
-            >
-            <n-button
-              v-if="screenPlanDraft.length"
-              size="small"
-              :disabled="screenPlanSaving"
-              @click="emit('clearPlan')"
-              >Удалить план</n-button
-            >
-          </n-space>
-        </template>
-        <template v-else-if="screenPlan">
-          <n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
-            <n-text>{{ index + 1 }}</n-text>
-            <n-text>
-              {{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
-              <template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
-              <template v-else-if="step.mode === 'SCREEN_MODE_TIMER'"
-                >: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)</template
-              >
-            </n-text>
-            <n-button
-              size="small"
-              :type="screenPlan.currentStep === index ? 'primary' : 'default'"
-              :disabled="screenPlan.currentStep === index"
-              @click="emit('setStep', index)"
-              >Показать</n-button
-            >
-            <template v-if="screenPlan.currentStep === index">
-              <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
-                <n-button
-                  size="small"
-                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
-                  >Старт</n-button
-                >
-                <n-button
-                  size="small"
-                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
-                  >Пауза</n-button
-                >
-                <n-button
-                  size="small"
-                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
-                  >Продолжить</n-button
-                >
-                <n-button
-                  size="small"
-                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
-                  >Сбросить</n-button
-                >
-              </template>
-              <template
-                v-else-if="
-                  step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
-                "
-              >
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')"
-                  >Запуск</n-button
-                >
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')"
-                  >Пауза</n-button
-                >
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')"
-                  >Продолжить</n-button
-                >
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')"
-                  >Стоп</n-button
-                >
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')"
-                  >Повтор</n-button
-                >
-                <n-input-number
-                  :value="screenVolume"
-                  :min="0"
-                  :max="100"
-                  :step="5"
-                  size="small"
-                  @update:value="emit('update:screenVolume', $event)"
-                />
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')"
-                  >Громкость</n-button
-                >
-                <n-input-number
-                  :value="screenPosition"
-                  :min="0"
-                  :step="5"
-                  size="small"
-                  @update:value="emit('update:screenPosition', $event)"
-                />
-                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')"
-                  >Перемотать</n-button
-                >
-              </template>
-            </template>
-          </n-space>
-        </template>
-      </div>
     </template>
   </div>
   <ScreenBindingModal