up

2026-10-18 12:42:04 +07:00
parent 30999630f0
commit b05d55b3fa
15 changed files with 261 additions and 208 deletions
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { NAlert, NButton, NInput, NInputNumber, NSelect, NSpace } from 'naive-ui'
-import type { Intent, ScreenMode, ScreenStep } from '../types/screen'
+import { computed } from 'vue'
+import { playbackControl } from '../utils/playbackControl'
+import type { ChannelState, Intent, ScreenMode, ScreenStep, TimerState } from '../types/screen'
 import { modeLabels } from '../utils/presentation'

-defineProps<{
+const props = defineProps<{
  steps: ScreenStep[]
  currentIndex: number | null
  draft: ScreenStep[]
  isEditing: boolean
  isBusy: boolean
  canPlayMain: boolean
+  mainDesired: ChannelState['desired']
+  mainStatus: ChannelState['status']
+  timerStatus: TimerState['status']
  canEdit: boolean
  notice: string
 }>()
@@ -24,6 +29,9 @@ const emit = defineEmits<{
  updateStep: [index: number, patch: Partial<ScreenStep>]
  command: [intent: Intent]
 }>()
+const mainControl = computed(() =>
+  playbackControl({ desired: props.mainDesired, status: props.mainStatus }),
+)
 const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
  value: Number(mode) as ScreenMode,
  label,
@@ -49,7 +57,7 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
      </template>
    </n-space>
    <n-alert v-if="notice" type="warning" role="status" class="plan-notice">{{ notice }}</n-alert>
-    <p v-if="!canEdit">Для редактирования войдите на сервер выбранной подготовленной игры.</p>
+    <p v-if="!canEdit">Для редактирования войдите на сервер игры.</p>
    <template v-if="isEditing">
      <n-space v-for="(step, index) in draft" :key="index" vertical class="plan-step">
        <span>Шаг {{ index + 1 }}</span>
@@ -111,7 +119,7 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
      </n-space>
    </template>
    <template v-else>
-      <p v-if="!steps.length">План экранов ещё не создан. Создайте план, чтобы настроить экраны.</p>
+      <p v-if="!steps.length">План экранов пуст.</p>
      <n-space
        v-for="(step, index) in steps"
        :key="index"
@@ -136,15 +144,27 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
            >{{ currentIndex === index ? 'Показан' : 'Показать' }}</n-button
          >
          <template v-if="currentIndex === index && step.mode === 7">
-            <n-button :disabled="isBusy" @click="emit('command', { action: 'timer-start' })"
-              >Старт</n-button
-            >
-            <n-button :disabled="isBusy" @click="emit('command', { action: 'timer-pause' })"
-              >Пауза</n-button
-            >
-            <n-button :disabled="isBusy" @click="emit('command', { action: 'timer-resume' })"
-              >Продолжить</n-button
+            <n-button
+              :disabled="isBusy"
+              @click="
+                emit('command', {
+                  action:
+                    timerStatus === 'running'
+                      ? 'timer-pause'
+                      : timerStatus === 'paused'
+                        ? 'timer-resume'
+                        : 'timer-start',
+                })
+              "
            >
+              {{
+                timerStatus === 'running'
+                  ? 'Пауза'
+                  : timerStatus === 'paused'
+                    ? 'Продолжить'
+                    : 'Старт'
+              }}
+            </n-button>
            <n-button :disabled="isBusy" @click="emit('command', { action: 'timer-reset' })"
              >Сбросить</n-button
            >
@@ -152,18 +172,8 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
          <template v-if="currentIndex === index && (step.mode === 2 || step.mode === 4)">
            <n-button
              :disabled="isBusy || !canPlayMain"
-              @click="emit('command', { action: 'play', channel: 'main' })"
-              >Запуск</n-button
-            >
-            <n-button
-              :disabled="isBusy || !canPlayMain"
-              @click="emit('command', { action: 'pause', channel: 'main' })"
-              >Пауза</n-button
-            >
-            <n-button
-              :disabled="isBusy || !canPlayMain"
-              @click="emit('command', { action: 'resume', channel: 'main' })"
-              >Продолжить</n-button
+              @click="emit('command', { action: mainControl.action, channel: 'main' })"
+              >{{ mainControl.label }}</n-button
            >
            <n-button
              :disabled="isBusy || !canPlayMain"
@@ -173,7 +183,7 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
            <n-button
              :disabled="isBusy || !canPlayMain"
              @click="emit('command', { action: 'replay', channel: 'main' })"
-              >Повтор</n-button
+              >Сначала</n-button
            >
          </template>
        </n-space>