feat(room): очередь поднятых рук видна всем + отключаемый модуль

Раньше HandQueueMenu.tsx рендерился только организатору — теперь очередь видит любой участник, но опустить чужую руку по-прежнему может только организатор (сервер это уже проверял, менял только фронт). Кнопка «Опустить» показывается у записи, только если это своя рука или пользователь — организатор. Модуль «поднятие руки» (кнопка «Рука» + очередь целиком) — отключаемый в админке (instance_settings.hand_queue, дефолт enabled=true, как у chat_enabled). Настройка едет участнику в JoinOut ещё до входа в комнату; выключенный модуль гасит кнопки и на фронте, и на бэке — raise_hand/lower_hand отклоняются кодом hand_queue_disabled, если модуль выключен, даже если у клиента на руках старый JoinOut.
2026-08-04 18:27:14 +03:00
parent 65fbcf952c
commit 10a3f8b3b4
21 changed files with 274 additions and 62 deletions
--- a/frontend/src/api/admin.ts
+++ b/frontend/src/api/admin.ts
@@ -19,6 +19,8 @@ export interface AiLevelStatus {
 /** Эффективные настройки инстанса. */
 export interface SettingsOut {
  chat_enabled: boolean
+  /** Включён ли модуль «поднятие руки» — кнопка «Рука» и очередь целиком. */
+  hand_queue_enabled: boolean
  /** Единый переключатель модуля AI (транскрибация + суммаризация). */
  transcription_enabled: boolean
  /** Есть ли хотя бы один Celery-воркер, обслуживающий очередь транскрибации. */
@@ -48,6 +50,7 @@ export interface SettingsOut {
 /** Тело частичного обновления настроек инстанса — все поля опциональны. */
 export interface SettingsUpdateIn {
  chat_enabled?: boolean
+  hand_queue_enabled?: boolean
  transcription_enabled?: boolean
  /** Недоступный уровень (см. `ai_levels`) — backend отвечает 400. */
  ai_level?: AiLevel
--- a/frontend/src/api/conferences.ts
+++ b/frontend/src/api/conferences.ts
@@ -61,6 +61,8 @@ export interface ConferenceJoinData {
  conference_id: string
  /** Включён ли чат для этой конференции — при `false` панель/кнопка чата не рендерятся. */
  chat_enabled: boolean
+  /** Включён ли модуль «поднятие руки» — при `false` кнопка «Рука» и очередь не рендерятся. */
+  hand_queue_enabled: boolean
  /** Потолок качества публикации видео на момент входа — см. `PublishQualityCap`. */
  publish_quality_cap: PublishQualityCap
  /** Максимум одновременно видимых плиток сцены (`StageGrid`) на момент входа. */
--- a/frontend/src/components/admin/AdminSettingsTab.tsx
+++ b/frontend/src/components/admin/AdminSettingsTab.tsx
@@ -68,6 +68,7 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
  const { user } = useAuth()

  const [chatEnabled, setChatEnabled] = useState(data.chat_enabled)
+  const [handQueueEnabled, setHandQueueEnabled] = useState(data.hand_queue_enabled)
  const [aiEnabled, setAiEnabled] = useState(data.transcription_enabled)
  const [aiLevel, setAiLevel] = useState<AiLevel>(data.ai_level)
  const [recipients, setRecipients] = useState<SummaryRecipientsMode>(data.summary_recipients)
@@ -132,6 +133,7 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
    // валился бы в 400, блокируя правку вообще любой другой настройки.
    const payload: SettingsUpdateIn = {}
    if (chatEnabled !== data.chat_enabled) payload.chat_enabled = chatEnabled
+    if (handQueueEnabled !== data.hand_queue_enabled) payload.hand_queue_enabled = handQueueEnabled
    if (aiEnabled !== data.transcription_enabled) payload.transcription_enabled = aiEnabled
    if (aiLevel !== data.ai_level) payload.ai_level = aiLevel
    if (recipients !== data.summary_recipients) payload.summary_recipients = recipients
@@ -175,6 +177,21 @@ function AdminSettingsForm({ data }: { data: SettingsOut }) {
            </label>
          </div>

+          <div className="toggle-row">
+            <div className="toggle-copy">
+              <strong>Поднятие руки</strong>
+              <span>Кнопка «Рука» и очередь поднятых рук в комнате — целиком</span>
+            </div>
+            <label className="switch">
+              <input
+                type="checkbox"
+                checked={handQueueEnabled}
+                onChange={(e) => setHandQueueEnabled(e.target.checked)}
+              />
+              <span className="slider" />
+            </label>
+          </div>
+
          <div className="toggle-row">
            <div className="toggle-copy">
              <strong>Транскрибация и суммаризация (AI)</strong>
--- a/frontend/src/components/room/HandQueueMenu.tsx
+++ b/frontend/src/components/room/HandQueueMenu.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Hand, ListOrdered } from 'lucide-react'
+import { useLocalParticipant } from '@livekit/components-react'
 import { useIsOrganizer } from '@/hooks/useIsOrganizer'
 import type { HandQueueEntry } from '@/hooks/useChat'

@@ -9,8 +10,15 @@ interface HandQueueMenuProps {
 }

 /**
- * Кнопка «Очередь» в тулбаре с поповером над ней — видна только организатору
- * (задача B1). Тот же самодостаточный паттерн, что и `StageViewMenu` («Вид»):
+ * Кнопка «Очередь» в тулбаре с поповером над ней — видна ВСЕМ участникам
+ * (сессия «28-hand-queue-for-all»: раньше очередь видел только организатор).
+ * Опустить чужую запись может по-прежнему только организатор — обычный
+ * участник видит кнопку «Опустить» только напротив СВОЕЙ записи (или не
+ * видит её вовсе, если сам руку не поднимал): сервер (`api/chat.py`) всё
+ * равно отклонит попытку опустить чужую руку кодом `forbidden`, но мёртвая
+ * кнопка, которая молча не работает, хуже отсутствующей.
+ *
+ * Тот же самодостаточный паттерн, что и `StageViewMenu` («Вид»):
 * собственное состояние открытия, закрытие по клику вне/Escape, поповер
 * `.tb-menu` над кнопкой — а не боковая панель на весь экран (как чат):
 * очередь рук — короткий список, а не история переписки, разворачивать её
@@ -19,11 +27,12 @@ interface HandQueueMenuProps {
 * Размер поповера подстраивается под число записей — `.hand-queue-list`
 * растёт вместе со списком и не даёт пустого места при 1–2 поднятых руках,
 * но не бесконечно: после ~10 строк список упирается в `max-height` и дальше
- * скроллится (см. room.css) — иначе организатор на энергичной встрече
- * получил бы поповер выше экрана.
+ * скроллится (см. room.css) — иначе участник на энергичной встрече получил
+ * бы поповер выше экрана.
 */
 export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
  const isOrganizer = useIsOrganizer()
+  const { localParticipant } = useLocalParticipant()
  const [open, setOpen] = useState(false)
  const wrapRef = useRef<HTMLDivElement>(null)

@@ -47,8 +56,6 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
    }
  }, [open])

-  if (!isOrganizer) return null
-
  return (
    <div className="tb-menu-wrap" ref={wrapRef}>
      <button
@@ -74,22 +81,28 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
            <p className="chat-empty">Пока никто не поднял руку</p>
          ) : (
            <ol className="hand-queue-list">
-              {queue.map((entry, index) => (
-                <li className="hand-queue-item" key={entry.identity}>
-                  <span className="hand-queue-position">{index + 1}</span>
-                  <span className="hand-queue-name">
-                    <Hand className="lucide" aria-hidden="true" />
-                    {entry.name}
-                  </span>
-                  <button
-                    type="button"
-                    className="hand-queue-lower"
-                    onClick={() => onLower(entry.identity)}
-                  >
-                    Опустить
-                  </button>
-                </li>
-              ))}
+              {queue.map((entry, index) => {
+                const isOwn = entry.identity === localParticipant.identity
+                const canLower = isOrganizer || isOwn
+                return (
+                  <li className="hand-queue-item" key={entry.identity}>
+                    <span className="hand-queue-position">{index + 1}</span>
+                    <span className="hand-queue-name">
+                      <Hand className="lucide" aria-hidden="true" />
+                      {entry.name}
+                    </span>
+                    {canLower && (
+                      <button
+                        type="button"
+                        className="hand-queue-lower"
+                        onClick={() => onLower(entry.identity)}
+                      >
+                        Опустить
+                      </button>
+                    )}
+                  </li>
+                )
+              })}
            </ol>
          )}
        </div>
--- a/frontend/src/components/room/RoomToolbar.tsx
+++ b/frontend/src/components/room/RoomToolbar.tsx
@@ -17,7 +17,6 @@ import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
 import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
 import { useToast } from '@/components/ui/ToastProvider'
 import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
-import { useIsOrganizer } from '@/hooks/useIsOrganizer'
 import type { HandQueueEntry } from '@/hooks/useChat'
 import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
 import { HandQueueMenu } from '@/components/room/HandQueueMenu'
@@ -59,6 +58,8 @@ interface RoomToolbarProps extends StageViewProps {
  pipSupported: boolean
  pipActive: boolean
  onTogglePiP: () => void
+  /** `JoinOut.hand_queue_enabled` — при `false` кнопка «Рука» и очередь не рендерятся вовсе. */
+  handQueueEnabled: boolean
  /**
   * Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама
   * решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity`
@@ -94,9 +95,11 @@ interface RoomToolbarProps extends StageViewProps {
 * (`DeviceSettingsDialog`). «Рука» — сознательное исключение из этой
 * экономии: поднять руку посреди разговора — действие со временем жизни в
 * секунды, прятать его в шторку настроек означало бы делать его практически
- * недоступным с телефона. «Очередь» показывается только организатору —
- * встречается редко, но по той же причине оставлена в тулбаре, а не в
- * шторке: организатору с телефона тоже нужно видеть очередь сразу.
+ * недоступным с телефона. «Очередь» видна ЛЮБОМУ участнику (сессия
+ * «28-hand-queue-for-all»: раньше только организатору), по той же причине
+ * оставлена в тулбаре, а не в шторке: любому участнику с телефона тоже нужно
+ * видеть очередь сразу. Обе кнопки целиком гасятся `handQueueEnabled`
+ * (`JoinOut.hand_queue_enabled`, отключаемый модуль в админке).
 * Полноэкранный режим на мобильном ОСТАЁТСЯ в тулбаре (не спрятан в шторку,
 * как демонстрация/мини-плеер) — по решению оператора вход в него должен
 * быть по аналогии с десктопом; если из-за этого кнопки не помещаются в один
@@ -115,6 +118,7 @@ export function RoomToolbar({
  pipSupported,
  pipActive,
  onTogglePiP,
+  handQueueEnabled,
  handQueue,
  onRaiseHand,
  onLowerHand,
@@ -128,21 +132,22 @@ export function RoomToolbar({
 }: RoomToolbarProps) {
  const toast = useToast()
  const isCompact = useIsCompactViewport()
-  const isOrganizer = useIsOrganizer()
  const { localParticipant } = useLocalParticipant()
  const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity)

  // Сколько кнопок реально видно на мобильном (демонстрация/мини-окно там
  // скрыты через CSS всегда, «Вид» не рендерится вовсе — см. докстринг) —
  // считаем в JS, а не через CSS-селекторы вида `:nth-child`: у «Очереди»
-  // (только у организатора) в DOM есть своя обёртка `.tb-menu-wrap`, из-за
-  // которой позиция остальных кнопок «плывёт», и подсчёт по структуре DOM
-  // был бы хрупким. От порога зависит `.tb-wrap-grid` в room.css — ниже он
-  // переключает перенос на 2 строки с «как поместится» (flex-wrap) на
-  // равномерную сетку 4 колонки (7 → 4+3, 8 → 4+4).
+  // в DOM есть своя обёртка `.tb-menu-wrap`, из-за которой позиция остальных
+  // кнопок «плывёт», и подсчёт по структуре DOM был бы хрупким. От порога
+  // зависит `.tb-wrap-grid` в room.css — ниже он переключает перенос на
+  // 2 строки с «как поместится» (flex-wrap) на равномерную сетку 4 колонки
+  // (7 → 4+3, 8 → 4+4). «Рука»/«Очередь» — обе теперь видны любому участнику
+  // (сессия «28-hand-queue-for-all»), их наличие зависит только от
+  // `handQueueEnabled`, не от роли.
  const mobileButtonCount =
-    3 /* микрофон, камера, рука */ +
-    (isOrganizer ? 1 : 0) /* очередь */ +
+    2 /* микрофон, камера */ +
+    (handQueueEnabled ? 2 : 0) /* рука, очередь */ +
    1 /* настройки */ +
    (fullscreenSupported ? 1 : 0) +
    (chatVisible ? 1 : 0) +
@@ -214,23 +219,25 @@ export function RoomToolbar({
        <span className="label">Демонстрация</span>
      </button>

-      <button
-        type="button"
-        className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`}
-        aria-pressed={handRaised}
-        aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'}
-        onClick={() => (handRaised ? onLowerHand() : onRaiseHand())}
-      >
-        <span className="icon-shell">
-          <Hand className="lucide" aria-hidden="true" />
-          {handQueue.length > 0 && (
-            <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
-          )}
-        </span>
-        <span className="label">Рука</span>
-      </button>
+      {handQueueEnabled && (
+        <button
+          type="button"
+          className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`}
+          aria-pressed={handRaised}
+          aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'}
+          onClick={() => (handRaised ? onLowerHand() : onRaiseHand())}
+        >
+          <span className="icon-shell">
+            <Hand className="lucide" aria-hidden="true" />
+            {handQueue.length > 0 && (
+              <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
+            )}
+          </span>
+          <span className="label">Рука</span>
+        </button>
+      )}

-      <HandQueueMenu queue={handQueue} onLower={onLowerHandById} />
+      {handQueueEnabled && <HandQueueMenu queue={handQueue} onLower={onLowerHandById} />}

      {!isCompact && (
        <StageViewMenu
--- a/frontend/src/pages/JoinPage.tsx
+++ b/frontend/src/pages/JoinPage.tsx
@@ -146,6 +146,7 @@ export function JoinPage() {
          title: resolved.title,
          conferenceId: data.conference_id,
          chatEnabled: data.chat_enabled,
+          handQueueEnabled: data.hand_queue_enabled,
          publishQualityCap: data.publish_quality_cap,
          stageMaxTiles: data.stage_max_tiles,
        },
--- a/frontend/src/pages/LobbyPage.tsx
+++ b/frontend/src/pages/LobbyPage.tsx
@@ -43,6 +43,7 @@ export function LobbyPage() {
          title: conference.title,
          conferenceId: conference.join.conference_id,
          chatEnabled: conference.join.chat_enabled,
+          handQueueEnabled: conference.join.hand_queue_enabled,
          publishQualityCap: conference.join.publish_quality_cap,
          stageMaxTiles: conference.join.stage_max_tiles,
          number: conference.number,
--- a/frontend/src/pages/RoomPage.tsx
+++ b/frontend/src/pages/RoomPage.tsx
@@ -55,6 +55,8 @@ interface RoomJoinState {
  number?: string
  /** `JoinOut.chat_enabled` — при `false` кнопка чата и панель не рендерятся. */
  chatEnabled?: boolean
+  /** `JoinOut.hand_queue_enabled` — при `false` кнопка «Рука» и очередь не рендерятся. */
+  handQueueEnabled?: boolean
  /**
   * Рычаги нагрузки медиа (`JoinOut.publish_quality_cap`/`stage_max_tiles`,
   * `instance_settings.media_limits`) — приезжают вместе с токеном, ДО
@@ -208,6 +210,7 @@ export function RoomPage() {
            title: info.title,
            conferenceId: result.conference_id,
            chatEnabled: result.chat_enabled,
+            handQueueEnabled: result.hand_queue_enabled,
            publishQualityCap: result.publish_quality_cap,
            stageMaxTiles: result.stage_max_tiles,
          })
@@ -260,10 +263,16 @@ export function RoomPage() {
  const chatVisible = Boolean(joinState?.chatEnabled) && !chat.unavailable

  // Identity участников с поднятой рукой — множеством, для дешёвого `.has()`
-  // на каждой плитке сцены (см. `RoomParticipantTile`).
+  // на каждой плитке сцены (см. `RoomParticipantTile`). Выключенный модуль
+  // (`handQueueEnabled=false`) гасит и эти значки — иначе на плитке мог бы
+  // повиснуть индикатор от руки, поднятой до отключения модуля (сервер
+  // хранит очередь в Redis независимо от тоггла, см. `services/hand_queue.py`).
  const raisedHandIdentities = useMemo(
-    () => new Set(chat.handQueue.map((entry) => entry.identity)),
-    [chat.handQueue],
+    () =>
+      joinState?.handQueueEnabled
+        ? new Set(chat.handQueue.map((entry) => entry.identity))
+        : new Set<string>(),
+    [chat.handQueue, joinState?.handQueueEnabled],
  )

  // Корневой контейнер комнаты — цель для fullscreen и источник video-элемента
@@ -528,6 +537,7 @@ export function RoomPage() {
            pipSupported={pip.supported}
            pipActive={pip.active}
            onTogglePiP={pip.toggle}
+            handQueueEnabled={Boolean(joinState.handQueueEnabled)}
            handQueue={chat.handQueue}
            onRaiseHand={chat.raiseHand}
            onLowerHand={() => chat.lowerHand()}