up

src/components/ControlPage.vue

@@ -4,13 +4,26 @@ import {
   NButton,
   NCard,
   NInputNumber,
+  NInput,
   NSelect,
   NSpace,
   NSwitch,
   useMessage,
 } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import type { Channel, HostInfo, Intent, PackageSummary, Playback, State } from '../types/screen'
+import type {
+  Channel,
+  HostInfo,
+  Intent,
+  PackageSummary,
+  Playback,
+  PreviewFrame,
+  ScreenMode,
+  State,
+} from '../types/screen'
+
+import { modeLabels } from '../utils/presentation'
+import { useScreenTimer } from '../composables/useScreenTimer'
 
 const message = useMessage()
 const bridge = window.screenBridge
@@ -20,6 +33,68 @@ const host = ref<HostInfo>({ displays: [] })
 const display = ref<number | null>(null)
 const positions = ref<Record<Channel, number | null>>({ main: 10, music: 10 })
 const isBusy = ref(false)
+const textDraft = ref('')
+const timerLabel = ref('Перерыв')
+const timerSeconds = ref<number | null>(300)
+const timerDisplay = useScreenTimer(() => state.value)
+const preview = ref<PreviewFrame | null>(null)
+const modeOptions = Object.entries(modeLabels).map(([key, label]) => ({
+  label,
+  value: Number(key) as ScreenMode,
+}))
+const previewURL = computed(() =>
+  preview.value?.session === state.value?.session &&
+  preview.value?.revision === state.value?.scene.revision
+    ? preview.value?.dataURL
+    : null,
+)
+const stepOptions = computed(() =>
+  (state.value?.catalog.steps ?? []).map((step, index) => ({
+    label: `${index + 1}. ${modeLabels[step.mode]}${step.mode === 8 ? ` · ${step.text.slice(0, 60)}` : ''}`,
+    value: index,
+  })),
+)
+const sceneLabels = {
+  idle: 'Окно показа закрыто',
+  pending: 'Подготовка показа',
+  ready: 'Показ готов',
+  error: 'Не удалось подготовить показ',
+}
+const timerLabels = {
+  stopped: 'Не запущен',
+  running: 'Идёт',
+  paused: 'Пауза',
+  finished: 'Завершён',
+}
+let previewTimer: ReturnType<typeof setInterval> | undefined
+let previewBusy = false
+async function refreshPreview() {
+  if (
+    !bridge ||
+    previewBusy ||
+    !state.value?.outputOpen ||
+    document.visibilityState !== 'visible' ||
+    state.value.scene.status !== 'ready'
+  )
+    return
+  previewBusy = true
+  try {
+    const frame = await bridge.preview()
+    if (
+      frame &&
+      state.value.outputOpen &&
+      frame.session === state.value.session &&
+      frame.revision === state.value.scene.revision &&
+      document.visibilityState === 'visible'
+    )
+      preview.value = frame
+  } catch {
+    /* Показ продолжает работать и при недоступности кадра предпросмотра. */
+  } finally {
+    previewBusy = false
+  }
+}
+
 const channels = ['main', 'music'] as const
 const playlist = computed(() =>
   state.value?.catalog.playlists.find((p) => p.id === state.value?.channels.music.playlistId),
@@ -43,6 +118,22 @@ let session = ''
 let sequence = 0
 function acceptState(value: State) {
   if (state.value && value.revision < state.value.revision) return
+  if (value.session !== state.value?.session || value.scene.text !== state.value?.scene.text)
+    textDraft.value = value.scene.text
+  if (
+    value.session !== state.value?.session ||
+    value.timer.label !== state.value?.timer.label ||
+    value.timer.durationMs !== state.value?.timer.durationMs
+  ) {
+    timerLabel.value = value.timer.label
+    timerSeconds.value = value.timer.durationMs / 1000
+  }
+  if (
+    !value.outputOpen ||
+    value.session !== state.value?.session ||
+    value.scene.revision !== state.value?.scene.revision
+  )
+    preview.value = null
   if (session !== value.session) {
     session = value.session
     sequence = value.sequence
@@ -100,6 +191,9 @@ onMounted(async () => {
     packages.value = await bridge.packages()
     await refreshHost()
   })
+  previewTimer = setInterval(() => {
+    void refreshPreview()
+  }, 500)
   let refreshing = false
   timer = setInterval(() => {
     if (refreshing) return
@@ -113,6 +207,7 @@ onMounted(async () => {
 })
 onUnmounted(() => {
   clearInterval(timer)
+  clearInterval(previewTimer)
   unsubscribe?.()
 })
 </script>
@@ -154,6 +249,144 @@ onUnmounted(() => {
       <n-alert v-if="!state.outputOpen" type="info"
         >Откройте показ, чтобы подготовить медиа и включить воспроизведение.</n-alert
       >
+      <section class="presentation-grid">
+        <n-card title="План показа">
+          <n-space vertical>
+            <n-select
+              :value="state.scene.stepIndex"
+              :options="stepOptions"
+              :disabled="isBusy || !state.catalog.steps.length"
+              placeholder="Выберите шаг"
+              :input-props="{ 'aria-label': 'Шаг плана' }"
+              @update:value="send({ action: 'step', index: $event })"
+            />
+            <p v-if="!state.catalog.steps.length">
+              В пакете нет плана. Используйте переключатель режимов.
+            </p>
+            <n-space>
+              <n-button
+                :disabled="isBusy || state.scene.stepIndex === null || state.scene.stepIndex <= 0"
+                @click="send({ action: 'step', index: (state.scene.stepIndex ?? 0) - 1 })"
+                >Предыдущий шаг</n-button
+              >
+              <n-button
+                :disabled="
+                  isBusy ||
+                  !state.catalog.steps.length ||
+                  (state.scene.stepIndex ?? -1) >= state.catalog.steps.length - 1
+                "
+                @click="send({ action: 'step', index: (state.scene.stepIndex ?? -1) + 1 })"
+                >Следующий шаг</n-button
+              >
+            </n-space>
+            <label>Режим показа</label>
+            <n-select
+              :value="state.scene.mode"
+              :options="modeOptions"
+              :disabled="isBusy"
+              :input-props="{ 'aria-label': 'Режим показа' }"
+              @update:value="send({ action: 'mode', mode: $event })"
+            />
+            <p role="status">{{ sceneLabels[state.scene.status] }}</p>
+            <n-alert v-if="state.scene.error" type="error">{{ state.scene.error }}</n-alert>
+            <n-button
+              v-if="state.scene.status === 'error'"
+              @click="send({ action: 'mode', mode: state.scene.mode })"
+              >Повторить подготовку</n-button
+            >
+            <p v-if="state.scene.mode === 6">
+              {{
+                state.results
+                  ? `Снимок результатов: ${new Date(state.results.capturedAt).toLocaleString('ru-RU')}`
+                  : 'Результаты пока не загружены'
+              }}
+            </p>
+          </n-space>
+        </n-card>
+        <n-card title="Текущий показ">
+          <img
+            v-if="previewURL"
+            class="preview"
+            data-testid="preview"
+            :src="previewURL"
+            alt="Предпросмотр текущего показа"
+          />
+          <div v-else class="preview-empty">
+            {{
+              !state.outputOpen
+                ? 'Окно показа закрыто'
+                : state.scene.status === 'pending'
+                  ? 'Подготовка показа…'
+                  : 'Предпросмотр недоступен'
+            }}
+          </div>
+          <p>Кадр реального окна показа, без второго звука.</p>
+        </n-card>
+      </section>
+      <n-card title="Текст и таймер">
+        <n-space vertical>
+          <label for="scene-text">Текст для показа</label>
+          <n-input
+            v-model:value="textDraft"
+            type="textarea"
+            :maxlength="10000"
+            :autosize="{ minRows: 2, maxRows: 6 }"
+            :input-props="{ id: 'scene-text' }"
+          />
+          <n-button
+            :disabled="isBusy || !textDraft.trim()"
+            @click="send({ action: 'text', text: textDraft })"
+            >Показать текст</n-button
+          >
+          <label for="timer-label">Подпись таймера</label>
+          <n-input
+            v-model:value="timerLabel"
+            :maxlength="200"
+            :input-props="{ id: 'timer-label' }"
+          />
+          <label for="timer-seconds">Длительность, секунды</label>
+          <n-input-number
+            v-model:value="timerSeconds"
+            :min="1"
+            :max="86400"
+            :precision="0"
+            :input-props="{ id: 'timer-seconds' }"
+          />
+          <n-button
+            :disabled="isBusy || !timerSeconds"
+            @click="
+              send({ action: 'timer-set', label: timerLabel, durationSeconds: timerSeconds ?? 0 })
+            "
+            >Показать таймер</n-button
+          >
+          <p role="status" class="timer-status">
+            {{ state.timer.label }} · {{ timerDisplay }} · {{ timerLabels[state.timer.status] }}
+          </p>
+          <p v-if="state.scene.mode !== 7 && state.timer.status === 'running'">
+            Таймер продолжает отсчёт в фоне.
+          </p>
+          <n-space>
+            <n-button
+              :disabled="isBusy || state.timer.status === 'running'"
+              @click="send({ action: 'timer-start' })"
+              >Запустить таймер</n-button
+            >
+            <n-button
+              :disabled="isBusy || state.timer.status !== 'running'"
+              @click="send({ action: 'timer-pause' })"
+              >Пауза таймера</n-button
+            >
+            <n-button
+              :disabled="isBusy || state.timer.status !== 'paused'"
+              @click="send({ action: 'timer-resume' })"
+              >Продолжить таймер</n-button
+            >
+            <n-button :disabled="isBusy" @click="send({ action: 'timer-reset' })"
+              >Сбросить таймер</n-button
+            >
+          </n-space>
+        </n-space>
+      </n-card>
       <label class="mute"
         >Выключить весь звук
         <n-switch
@@ -286,10 +519,36 @@ onUnmounted(() => {
   display: grid;
   gap: 16px;
   margin: auto;
-  max-width: 900px;
+  max-width: 1280px;
   padding: 16px;
 }
 
+.presentation-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
+}
+
+.preview {
+  background: var(--brand-background);
+  display: block;
+  max-height: 50vh;
+  object-fit: contain;
+  width: 100%;
+}
+
+.preview-empty {
+  align-items: center;
+  aspect-ratio: 16 / 9;
+  background: var(--brand-background);
+  display: flex;
+  justify-content: center;
+}
+
+.timer-status {
+  font-variant-numeric: tabular-nums;
+}
+
 p {
   overflow-wrap: anywhere;
 }