13 Commits

Author SHA1 Message Date
0e029a2bf8 release: версия 0.0.29
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
2026-08-04 21:13:49 +03:00
f89bf1ad64 feat(room): кнопка демонстрации экрана в мини-окне
В Document PiP (Chrome/Edge) своего тулбара нет, и начать демонстрацию,
не свернув мини-окно, было нельзя. Кнопка сделана по образцу кнопки
микрофона, добавленной в 0.0.15: тот же `useTrackToggle` через
`RoomContext`, поэтому она и кнопка основного тулбара — два вида одного
состояния и рассинхрону взяться неоткуда.

Главный вопрос задачи — пустит ли платформа `getDisplayMedia()`, вызванный
из кода основного окна по клику в ДРУГОМ окне. Замер в Chrome 150: после
клика в PiP `navigator.userActivation.isActive === true` в обоих окнах,
активация доезжает до опенера, вызов проходит, системный пикер выбора
экрана открывается отдельным окном поверх всего, а не прячется за
заглушкой основного окна.

Опции захвата (`SCREEN_SHARE_CAPTURE_OPTIONS`) вынесены из `RoomToolbar` в
`lib/screenShareOptions.ts`: кнопок демонстрации теперь две, и разойдись
они хотя бы в `audio`, демонстрация получалась бы разной в зависимости от
того, откуда её запустили.

Фокус в мини-окне не менялся: своя демонстрация показывается по тем же
правилам `pickStageFocus`, что и в основном окне.

В Safari мини-окно — нативный video-PiP без собственного DOM, кнопке там
негде жить; в Firefox мини-окна нет вовсе. Это ограничение платформы.
2026-08-04 21:13:27 +03:00
aee76329c4 release: версия 0.0.28 2026-08-04 18:29:22 +03:00
10a3f8b3b4 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
65fbcf952c release: версия 0.0.27
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
2026-08-04 02:52:49 +03:00
b44652d6a6 fix(room): разрыв связи выбрасывал участника в лобби вместо возврата в конференцию
Телефон с погасшим экраном (и просто свёрнутый браузер) выпадал из
конференции: Chrome срезает фоновой вкладке ресурсы, ICE перестаёт
отвечать, и LiveKit закрывает участника через 5 с после потери
соединения. Замерено на проде: 37 с после блокировки экрана, 23 с
после сворачивания браузера. Восстановить сессию после этого нельзя
(сервер отвечает "could not restart participant") — нужен полный
повторный вход, и livekit-client его пытается сделать сам, но его
бюджет повторов в фоновой вкладке успевает сгореть. Тогда приходило
событие Disconnected, и страница уводила пользователя в лобби.

Теперь непреднамеренный разрыв не уводит со страницы, а сбрасывает
joinState — дальше работает уже написанный путь авто-перезахода:
резолв конференции, свежий токен, вход заново. Намеренный выход
отличается по флагу от кнопки "Выйти", а не по коду причины: причина
CLIENT_INITIATED приходит и от кнопки, и от самого livekit-client,
который при заморозке вкладки (событие freeze) вызывает disconnect()
сам — и эта его подписка не отключается опцией disconnectOnPageLeave.

Разрывы, после которых возвращаться нельзя (выгнал организатор,
конференция закрыта, вход той же личностью с другого устройства),
уводят в лобби как раньше. От бесконечного цикла "вошёл — сразу
выбросило" защищает лимит в 5 перезаходов подряд; соединение,
прожившее дольше 30 с, счётчик обнуляет.
2026-08-04 02:52:22 +03:00
d11b808e97 release: версия 0.0.26
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
2026-08-04 00:01:22 +03:00
ed6f9fff44 feat(room): полноэкранный режим на мобильном с выезжающим тулбаром
Вход — кнопка «Экран» в тулбаре, теперь видна и на мобильном (по аналогии
с десктопом, а не спрятана в шторку настроек). В полноэкранном режиме
топбар и тулбар выходят из потока и лежат оверлеем поверх сцены: тап/клик
по сцене вне элементов управления показывает их, сами прячутся через
несколько секунд бездействия; на десктопе дополнительно — наведение мыши
в нижнюю полосу экрана. Работает одинаково на мобильном и десктопе.

Кнопка настроек устройств в тулбаре на мобильном подписана «Настройки»
вместо «Устройства». Раскладка кнопок мобильного тулбара, когда они не
помещаются в один ряд (7+, обычный случай с «Экраном» и «Очередью» у
организатора), стала равномерной сеткой на 4 колонки вместо переноса
«как получится» через flex-wrap.
2026-08-04 00:00:45 +03:00
06455f2401 fix(room): шторка настроек не закрывалась свайпом вниз
Обработчики висели только на ручке `.room-sheet-handle` (40×4px) —
попасть в неё пальцем практически невозможно, и палец почти всегда
приземлялся на панель, где обработчиков не было вовсе. Свайп теперь
закрывает шторку при жесте по любому месту панели, но только когда
содержимое проскроллено в самый верх — иначе палец должен листать
список устройств, как в любом стандартном bottom sheet.
2026-08-03 23:59:26 +03:00
3847476798 chore(deploy): render-templates.sh умеет читать другой файл значений
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
Путь к файлу со значениями был жёстко зашит как `<корень>/.env`. На
машине разработчика корневой `.env` держит боевые адреса
(LIVEKIT_NODE_IP/TURN_EXTERNAL_IP смотрят на прод), поэтому рендерить из
него конфиги для локального стенда нельзя, а подменить нечем — локальные
сессии дважды повторяли логику скрипта вручную через envsubst, что
означало расхождение с реальным рендером при первой же правке шаблонов.

Теперь источник значений задаётся переменной ENV_FILE:

    ENV_FILE=.env.local ./deploy/render-templates.sh

Поведение по умолчанию не меняется — тот же корневой `.env`. install.sh
свою переменную ENV_FILE не экспортирует, так что она сюда не протекает;
вызов из install.sh и рендер на сервере работают как раньше. Скрипт
дополнительно печатает, из какого файла взяты значения, и подсказывает
про ENV_FILE, если файл не найден.
2026-08-03 18:45:20 +03:00
a895782250 release: версия 0.0.25
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
2026-08-03 18:24:13 +03:00
fa8270c156 fix(room): мини-окно игнорировало закрепление, а демонстрация слетала от реплики
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
Мини-плеер намеренно вёл себя иначе, чем основное окно: без удержания
демонстрации экрана (holdScreenShare), без приоритета говорящего с
включённой камерой, без антидребезга говорящего и с собственным чистым
useState для закрепления. На практике это читалось как поломка —
закрепление, сделанное в основном окне, в мини-окне не действовало, а
демонстрация экрана пропадала, стоило кому-то сказать слово.

Теперь pickStageFocus получает одинаковые правила в обоих вариантах
сцены. Единственное сознательное отличие — localKey («показать себя»
последним фолбэком), он остаётся только у мини-плеера: это защита от
дефекта 0.0.11, когда мини-окно открывалось на самом пользователе.

Закрепление переезжает между окнами тем же мостиком через RoomPage,
что и фокус (initialPinnedKey/onPinnedKeyChange). Отдельный общий
источник правды не нужен: экземпляр сцены в каждый момент ровно один —
пока открыт Document PiP, основное окно показывает заглушку.

Заодно в снятии закрепления «участник вышел из комнаты» добавлена
охрана tracksKnown. На первом рендере нового экземпляра сцены useTracks
отдаёт пустой массив, и пустой набор читался как «все вышли»: приехавшее
через initialPinnedKey закрепление обнулялось прямо при монтировании,
то есть мини-плеер терял его каждый раз.

Надпись на булавке — «Закрепить» вместо «Закрепить в основном окне»:
закрепление больше не ограничено основным окном.
2026-08-03 18:21:43 +03:00
a9e24f6692 fix(room): в Chrome пропадал звук после возврата из мини-окна
RoomAudioRenderer жил внутри RoomStage и рендерился дважды — в ветке
variant="pip" и в основной. При открытии Document PiP сцена
размонтируется в основном окне и монтируется в PiP-окне, поэтому
скрытые <audio> с чужими аудиотреками физически переезжали в ДРУГОЙ
документ, а при возврате — обратно. После такого переезда Chrome
теряет аудиовыход у remote-трека: пакеты продолжают приходить
(packetsReceived растёт), но totalSamplesDuration и totalAudioEnergy
замирают, и трек молчит даже в свежесозданном <audio> со свежим
MediaStream. Тот же цикл detach/attach в пределах одного документа
безвреден — дело именно в переезде между документами. В Safari бага не
было: там Document PiP не используется (video-фолбэк), сцена остаётся
в основном окне.

Рендерер вынесен в RoomPage — один экземпляр, всегда в основном
документе. В PiP-окне аудиоэлементов теперь нет вовсе, цикл «открыл
мини-окно → вернул» их не касается.
2026-08-03 18:19:19 +03:00
34 changed files with 1040 additions and 183 deletions

View File

@@ -122,7 +122,7 @@ SMTP_TIMEOUT_S=30
# --- Версия инстанса (релиз v0.0.1) --- # --- Версия инстанса (релиз v0.0.1) ---
# install.sh копирует значение из корневого файла VERSION при каждой # install.sh копирует значение из корневого файла VERSION при каждой
# установке/обновлении — руками менять не нужно. # установке/обновлении — руками менять не нужно.
VIDCONF_VERSION=0.0.24 VIDCONF_VERSION=0.0.29
# --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного # --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
# `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг, # `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,

View File

@@ -3,6 +3,151 @@
Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/),
проект придерживается [семантического версионирования](https://semver.org/lang/ru/). проект придерживается [семантического версионирования](https://semver.org/lang/ru/).
## [0.0.29] — 2026-08-04
Кнопка «демонстрация экрана» в мини-окне конференции.
### Добавлено
- В мини-окне (Document PiP) рядом с кнопкой микрофона появилась кнопка
демонстрации экрана: начать и остановить показ можно, не разворачивая
основное окно. Кнопка и кнопка основного тулбара отражают одно
состояние — обе читают его из комнаты, а не из разметки.
- Своя демонстрация показывается в мини-окне по обычным правилам сцены:
забирает крупную плитку при старте, держится, пока говорят другие, и
уступает говорящему либо закреплённому участнику после остановки.
### Примечания
- Кнопка есть только там, где мини-окно — настоящее окно со своей
разметкой, то есть в Chrome и Edge. В Safari мини-окно выводится
средствами системы (нативный «картинка в картинке»), собственных
кнопок в нём быть не может; в Firefox мини-окна нет вовсе. Это
ограничение браузеров, а не недоработка.
- При выборе «весь экран» мини-окно попадает в собственную
демонстрацию — как и у всех остальных участников. Чтобы этого
избежать, показывайте конкретное окно, а не экран целиком.
## [0.0.28] — 2026-08-04
Очередь поднятых рук видна всем участникам + отключаемый модуль.
### Добавлено
- Очередь поднятых рук больше не спрятана от обычных участников — её
видит любой, кто в конференции, не только организатор. Опустить чужую
руку по-прежнему может только организатор: сервер это уже проверял
(`api/chat.py`, задача B1), правки — только на фронте, кнопка
«Опустить» показывается у записи, если это своя рука либо пользователь
сам организатор.
- «Поднятие руки» (кнопка «Рука» + очередь целиком) — отключаемый модуль
в админке (`instance_settings.hand_queue`, дефолт `enabled=true`
поведение существующих инсталляций не меняется). Настройка едет
участнику в `JoinOut` (как `chat_enabled`) до входа в комнату.
Выключенный модуль гасит кнопки на фронте и отклоняет
`raise_hand`/`lower_hand` на сервере кодом `hand_queue_disabled`
вторая линия защиты для клиента со старым `JoinOut` на руках.
Переключение применяется со следующего входа в комнату (та же
застылость на время жизни соединения, что и у `chat_enabled`).
## [0.0.27] — 2026-08-04
Разрыв связи больше не выбрасывает участника из конференции.
### Исправлено
- Телефон с погасшим экраном выпадал из конференции, а при возвращении
мог оказаться в лобби вместо комнаты. Причина установлена по логам
прода: Chrome срезает ресурсы фоновой вкладке, телефон перестаёт
отвечать по ICE, и LiveKit закрывает участника через 5 с после потери
соединения (замерено: 37 с после блокировки экрана, 23 с после
сворачивания браузера — то есть достаточно просто убрать вкладку в
фон, гасить экран не обязательно). Восстановить сессию после этого
нельзя — участника на сервере уже нет; нужен полный повторный вход,
и `livekit-client` пытается сделать его сам, но его бюджет повторов
(10 попыток за ~44 с) в фоновой вкладке успевает сгореть. Тогда
приходило событие `Disconnected`, и страница комнаты уводила
пользователя в лобби.
Теперь непреднамеренный разрыв не уводит со страницы: сбрасывается
состояние входа, и работает уже имевшийся путь авто-перезахода —
резолв конференции, свежий токен, вход заново. Намеренный выход
отличается по нажатию кнопки «Выйти», а не по коду причины: причину
`CLIENT_INITIATED` присылает и кнопка, и сам `livekit-client`, который
при заморозке вкладки (событие `freeze`) вызывает `disconnect()`
самостоятельно. Разрывы, после которых возвращаться нельзя (участника
выгнал организатор, конференция закрыта, вход той же личностью с
другого устройства), уводят в лобби как раньше. От цикла «вошёл —
сразу выбросило» защищает лимит в 5 перезаходов подряд; соединение,
прожившее дольше 30 с, счётчик обнуляет.
## [0.0.26] — 2026-08-04
Мобильная комната: свайп шторки настроек и полноэкранный режим.
### Исправлено
- Шторка «Настройки» на мобильном не закрывалась свайпом вниз почти никогда:
обработчики висели только на ручке-волоске (`.room-sheet-handle`,
40×4px) — палец в неё практически невозможно попасть, и палец почти
всегда приземлялся на панель, где обработчиков не было вовсе. Теперь
свайп закрывает шторку при жесте по любому месту панели, но только
когда её содержимое проскроллено в самый верх (`scrollTop === 0` на
начало жеста) — иначе свайп вниз листает список устройств, как и должен
стандартный bottom sheet.
### Добавлено
- Полноэкранный режим комнаты — на мобильном кнопка «Экран» в тулбаре (как
на десктопе), при активации топбар и тулбар уходят из потока и лежат
оверлеем поверх сцены: показываются по тапу/клику по сцене вне элементов
управления и сами прячутся через несколько секунд бездействия. На
десктопе — та же логика (топбар/тулбар тоже прячутся в полноэкранном
режиме), дополнительный способ вернуть их — навести мышь в нижнюю полосу
экрана.
### Изменено
- Кнопка настроек устройств в тулбаре на мобильном подписана «Настройки»
вместо «Устройства».
- Раскладка кнопок мобильного тулбара, когда они не помещаются в один ряд
(7 и больше — с полноэкранным режимом и «Очередью» у организатора это
обычный случай), стала равномерной сеткой на 4 колонки (7 → 4+3,
8 → 4+4) вместо переноса «как получится» через `flex-wrap`.
- `deploy/render-templates.sh` умеет читать значения из файла, заданного
переменной `ENV_FILE`, а не только из корневого `.env` (см. коммит
`3847476`, вошёл в этот релиз) — для локальных стендов, где корневой
`.env` указывает на боевые адреса.
## [0.0.25] — 2026-08-03
Два дефекта мини-окна конференции (Document PiP), оба видны только в Chrome.
### Исправлено
- В Chrome пропадал звук других участников после возврата сцены из
мини-окна в основное. `RoomAudioRenderer` жил внутри `RoomStage` и
рендерился в обеих её ветках, поэтому скрытые `<audio>` с чужими
аудиотреками физически переезжали в документ PiP-окна и обратно.
После такого переезда Chrome теряет аудиовыход у remote-трека: пакеты
продолжают приходить (`packetsReceived` растёт), а
`totalSamplesDuration` и `totalAudioEnergy` замирают, и трек молчит
даже в свежесозданном `<audio>` со свежим `MediaStream`. Тот же цикл
detach/attach в пределах одного документа безвреден — дело именно в
переезде между документами. Рендерер вынесен в `RoomPage`: один
экземпляр, всегда в основном документе, в PiP-окне аудиоэлементов нет
вовсе. В Safari бага не было — там Document PiP не используется
(video-фолбэк), сцена из основного окна не уезжает.
- В мини-окне не действовало закрепление участника, а демонстрация
экрана слетала на говорящего от любой чужой реплики. Мини-плеер
намеренно ходил с упрощёнными правилами выбора фокуса (без
`holdScreenShare`, без приоритета говорящего с камерой, без
антидребезга) и с собственным локальным состоянием закрепления.
Теперь `pickStageFocus` получает одинаковые правила в обоих вариантах
сцены, а закрепление переезжает между окнами тем же мостиком через
`RoomPage`, что и фокус. Сознательно оставлено одно отличие —
фолбэк «показать себя» (`localKey`) только у мини-плеера: это защита
от дефекта 0.0.11, когда мини-окно открывалось на самом пользователе.
- Закрепление сбрасывалось при каждом монтировании сцены: на первом
рендере `useTracks` отдаёт пустой набор треков, и правило «закреплённый
вышел из комнаты» принимало это за уход участника.
### Изменено
- Кнопка-булавка на плитке подписана «Закрепить» вместо «Закрепить в
основном окне» — закрепление больше не ограничено основным окном.
## [0.0.24] — 2026-08-03 ## [0.0.24] — 2026-08-03
Три артефакта вёрстки, вылезающие за границы блоков (эмодзи-поповер чата, Три артефакта вёрстки, вылезающие за границы блоков (эмодзи-поповер чата,

View File

@@ -1 +1 @@
0.0.24 0.0.29

View File

@@ -456,6 +456,7 @@ def _to_settings_out(cfg: InstanceConfig, *, transcription_queue_served: bool) -
"""Собрать `SettingsOut` из эффективной конфигурации + доступность уровней AI.""" """Собрать `SettingsOut` из эффективной конфигурации + доступность уровней AI."""
return SettingsOut( return SettingsOut(
chat_enabled=cfg.chat.enabled, chat_enabled=cfg.chat.enabled,
hand_queue_enabled=cfg.hand_queue.enabled,
transcription_enabled=cfg.transcriber.enabled, transcription_enabled=cfg.transcriber.enabled,
ai_level=cfg.ai_level, ai_level=cfg.ai_level,
ai_levels=detect_ai_levels(cfg), ai_levels=detect_ai_levels(cfg),

View File

@@ -71,6 +71,7 @@ async def chat_websocket(
except ChatAuthError as exc: except ChatAuthError as exc:
await _close_quietly(websocket, exc.close_code) await _close_quietly(websocket, exc.close_code)
return return
hand_queue_enabled = await service.hand_queue_enabled()
pubsub = redis_client.pubsub() pubsub = redis_client.pubsub()
channel = chat_channel(conference.id) channel = chat_channel(conference.id)
@@ -94,7 +95,11 @@ async def chat_websocket(
async with asyncio.TaskGroup() as tg: async with asyncio.TaskGroup() as tg:
tg.create_task(_pump_pubsub_to_websocket(websocket, pubsub, channel, seen_ids)) tg.create_task(_pump_pubsub_to_websocket(websocket, pubsub, channel, seen_ids))
tg.create_task(_pump_websocket_to_service(websocket, service, conference, identity)) tg.create_task(
_pump_websocket_to_service(
websocket, service, conference, identity, hand_queue_enabled
)
)
except* WebSocketDisconnect: except* WebSocketDisconnect:
# Штатное закрытие соединения клиентом — не ошибка. # Штатное закрытие соединения клиентом — не ошибка.
pass pass
@@ -163,9 +168,20 @@ async def _pump_pubsub_to_websocket(
async def _pump_websocket_to_service( async def _pump_websocket_to_service(
websocket: WebSocket, service: ChatService, conference: Conference, identity: ChatIdentity websocket: WebSocket,
service: ChatService,
conference: Conference,
identity: ChatIdentity,
hand_queue_enabled: bool,
) -> None: ) -> None:
"""Читать сообщения клиента (текст чата / поднять-опустить руку), валидировать и обработать.""" """Читать сообщения клиента (текст чата / поднять-опустить руку), валидировать и обработать.
`hand_queue_enabled` — снятый один раз при подключении тоггл модуля
«поднятие руки» (см. `ChatService.hand_queue_enabled`): при `False`
`raise_hand`/`lower_hand` отклоняются кодом `hand_queue_disabled` — вторая
линия защиты сверх того, что фронт при выключенном модуле вообще не
рисует кнопки (см. `RoomToolbar`/`HandQueueMenu`).
"""
is_organizer = conference.owner_id is not None and conference.owner_id == identity.user_id is_organizer = conference.owner_id is not None and conference.owner_id == identity.user_id
while True: while True:
raw = await websocket.receive_text() raw = await websocket.receive_text()
@@ -178,11 +194,21 @@ async def _pump_websocket_to_service(
if isinstance(envelope, ChatMessageIn): if isinstance(envelope, ChatMessageIn):
await service.persist_and_publish(conference, identity=identity, text=envelope.text) await service.persist_and_publish(conference, identity=identity, text=envelope.text)
elif isinstance(envelope, RaiseHandIn): elif isinstance(envelope, RaiseHandIn):
if not hand_queue_enabled:
await websocket.send_json(
ChatErrorOut(code="hand_queue_disabled").model_dump(mode="json")
)
continue
await hand_queue.raise_hand( await hand_queue.raise_hand(
conference.id, identity=_identity_key(identity), name=identity.author_name conference.id, identity=_identity_key(identity), name=identity.author_name
) )
await hand_queue.publish_snapshot(conference.id) await hand_queue.publish_snapshot(conference.id)
else: else:
if not hand_queue_enabled:
await websocket.send_json(
ChatErrorOut(code="hand_queue_disabled").model_dump(mode="json")
)
continue
target = envelope.identity or _identity_key(identity) target = envelope.identity or _identity_key(identity)
if target != _identity_key(identity) and not is_organizer: if target != _identity_key(identity) and not is_organizer:
await websocket.send_json( await websocket.send_json(

View File

@@ -33,12 +33,19 @@ class ChatConfig(BaseModel):
enabled: bool = True enabled: bool = True
class HandQueueConfig(BaseModel):
"""Конфигурация переключателя модуля «поднятие руки» (кнопка + очередь целиком)."""
enabled: bool = True
class PluginsConfig(BaseModel): class PluginsConfig(BaseModel):
"""Корневая модель конфигурации для `config/plugins.yaml`.""" """Корневая модель конфигурации для `config/plugins.yaml`."""
transcriber: TranscriberConfig = Field(default_factory=TranscriberConfig) transcriber: TranscriberConfig = Field(default_factory=TranscriberConfig)
summarizer: SummarizerConfig = Field(default_factory=SummarizerConfig) summarizer: SummarizerConfig = Field(default_factory=SummarizerConfig)
chat: ChatConfig = Field(default_factory=ChatConfig) chat: ChatConfig = Field(default_factory=ChatConfig)
hand_queue: HandQueueConfig = Field(default_factory=HandQueueConfig)
def load_plugins_config(path: str | Path) -> PluginsConfig: def load_plugins_config(path: str | Path) -> PluginsConfig:
@@ -92,6 +99,7 @@ class InstanceConfig(BaseModel):
transcriber: TranscriberConfig transcriber: TranscriberConfig
summarizer: SummarizerConfig summarizer: SummarizerConfig
chat: ChatConfig chat: ChatConfig
hand_queue: HandQueueConfig = Field(default_factory=HandQueueConfig)
ai_level: AiLevel = "min" ai_level: AiLevel = "min"
summary_recipients: SummaryRecipientsMode = "all" summary_recipients: SummaryRecipientsMode = "all"
display_timezone: str = "Europe/Moscow" display_timezone: str = "Europe/Moscow"

View File

@@ -147,6 +147,7 @@ class SettingsOut(BaseModel):
""" """
chat_enabled: bool chat_enabled: bool
hand_queue_enabled: bool
transcription_enabled: bool transcription_enabled: bool
ai_level: AiLevel ai_level: AiLevel
ai_levels: list[AiLevelStatus] ai_levels: list[AiLevelStatus]

View File

@@ -130,6 +130,9 @@ class JoinOut(BaseModel):
# Тоггл инстанса `chat.enabled` на момент входа — клиент решает, # Тоггл инстанса `chat.enabled` на момент входа — клиент решает,
# показывать ли UI чата, не дожидаясь ошибки WS-подключения. # показывать ли UI чата, не дожидаясь ошибки WS-подключения.
chat_enabled: bool chat_enabled: bool
# Тоггл инстанса `hand_queue.enabled` на момент входа — гасит модуль
# «поднятие руки» целиком (кнопка + очередь), см. `HandQueueConfig`.
hand_queue_enabled: bool
# Рычаги нагрузки медиа (`instance_settings.media_limits`) — отдаются # Рычаги нагрузки медиа (`instance_settings.media_limits`) — отдаются
# прямо в join-ответе, а не только в админке: участнику нужно иметь их # прямо в join-ответе, а не только в админке: участнику нужно иметь их
# на руках ДО публикации своего трека (см. `services/conference_access.py`). # на руках ДО публикации своего трека (см. `services/conference_access.py`).

View File

@@ -148,6 +148,15 @@ class ChatService:
raise WrongRoomError raise WrongRoomError
return conference return conference
async def hand_queue_enabled(self) -> bool:
"""Тоггл инстанса `hand_queue.enabled` — снимается один раз при подключении WS
(см. `api/chat.py::chat_websocket`), а не на каждое сообщение: та же
осознанная «застылость» на время жизни соединения, что и у
`is_organizer` в `_pump_websocket_to_service` — переключение модуля
администратором применяется со следующего подключения."""
cfg = await InstanceSettingsService(self._session).get()
return cfg.hand_queue.enabled
async def history(self, conference: Conference) -> list[ChatMessageOut]: async def history(self, conference: Conference) -> list[ChatMessageOut]:
"""Последние сообщения открытой сессии конференции (пусто, если сессии ещё нет).""" """Последние сообщения открытой сессии конференции (пусто, если сессии ещё нет)."""
session_record = await self._sessions.get_open_by_conference(conference.id) session_record = await self._sessions.get_open_by_conference(conference.id)

View File

@@ -53,6 +53,7 @@ def build_join(
identity: str, identity: str,
name: str, name: str,
chat_enabled: bool, chat_enabled: bool,
hand_queue_enabled: bool,
publish_quality_cap: PublishQualityCap, publish_quality_cap: PublishQualityCap,
stage_max_tiles: StageMaxTiles, stage_max_tiles: StageMaxTiles,
avatar_url: str | None = None, avatar_url: str | None = None,
@@ -61,9 +62,10 @@ def build_join(
"""Построить ответ join: LiveKit access-токен для входа в комнату конференции. """Построить ответ join: LiveKit access-токен для входа в комнату конференции.
Имя LiveKit-комнаты всегда равно `conference.slug` (ADR-001, п.4). Имя LiveKit-комнаты всегда равно `conference.slug` (ADR-001, п.4).
`chat_enabled`/`publish_quality_cap`/`stage_max_tiles` — снятые вызывающей `chat_enabled`/`hand_queue_enabled`/`publish_quality_cap`/`stage_max_tiles`
стороной значения `instance_settings`: читаются здесь параметрами, а не — снятые вызывающей стороной значения `instance_settings`: читаются здесь
заново из БД, чтобы не плодить отдельный запрос настроек на каждый join. параметрами, а не заново из БД, чтобы не плодить отдельный запрос настроек
на каждый join.
`avatar_url`/`is_organizer` `avatar_url`/`is_organizer`
прокидываются в метаданные токена как JSON `{"avatar_url": ..., "is_organizer": true}` прокидываются в метаданные токена как JSON `{"avatar_url": ..., "is_organizer": true}`
— поля добавляются, только если заданы (гость без аватара и не-организатор — поля добавляются, только если заданы (гость без аватара и не-организатор
@@ -91,6 +93,7 @@ def build_join(
room_name=conference.slug, room_name=conference.slug,
conference_id=conference.id, conference_id=conference.id,
chat_enabled=chat_enabled, chat_enabled=chat_enabled,
hand_queue_enabled=hand_queue_enabled,
publish_quality_cap=publish_quality_cap, publish_quality_cap=publish_quality_cap,
stage_max_tiles=stage_max_tiles, stage_max_tiles=stage_max_tiles,
) )

View File

@@ -155,6 +155,7 @@ class ConferenceService:
identity=str(owner_id), identity=str(owner_id),
name=owner_name, name=owner_name,
chat_enabled=cfg.chat.enabled, chat_enabled=cfg.chat.enabled,
hand_queue_enabled=cfg.hand_queue.enabled,
publish_quality_cap=cfg.media_limits.publish_quality_cap, publish_quality_cap=cfg.media_limits.publish_quality_cap,
stage_max_tiles=cfg.media_limits.stage_max_tiles, stage_max_tiles=cfg.media_limits.stage_max_tiles,
avatar_url=resolve_avatar_url(self._media_root, owner_avatar_path), avatar_url=resolve_avatar_url(self._media_root, owner_avatar_path),
@@ -251,6 +252,7 @@ class ConferenceService:
identity=str(user.id), identity=str(user.id),
name=user.name_user, name=user.name_user,
chat_enabled=cfg.chat.enabled, chat_enabled=cfg.chat.enabled,
hand_queue_enabled=cfg.hand_queue.enabled,
publish_quality_cap=cfg.media_limits.publish_quality_cap, publish_quality_cap=cfg.media_limits.publish_quality_cap,
stage_max_tiles=cfg.media_limits.stage_max_tiles, stage_max_tiles=cfg.media_limits.stage_max_tiles,
avatar_url=resolve_avatar_url(self._media_root, user.avatar_path), avatar_url=resolve_avatar_url(self._media_root, user.avatar_path),
@@ -275,6 +277,7 @@ class ConferenceService:
identity=f"guest:{guest.id}", identity=f"guest:{guest.id}",
name=data.display_name, name=data.display_name,
chat_enabled=cfg.chat.enabled, chat_enabled=cfg.chat.enabled,
hand_queue_enabled=cfg.hand_queue.enabled,
publish_quality_cap=cfg.media_limits.publish_quality_cap, publish_quality_cap=cfg.media_limits.publish_quality_cap,
stage_max_tiles=cfg.media_limits.stage_max_tiles, stage_max_tiles=cfg.media_limits.stage_max_tiles,
) )

View File

@@ -1,7 +1,7 @@
"""Хранилище настроек инстанса (`instance_settings`, key-value JSONB) и их бутстрап. """Хранилище настроек инстанса (`instance_settings`, key-value JSONB) и их бутстрап.
Ключи зеркалят секции конфигурации (`transcriber`, `summarizer`, `chat`, Ключи зеркалят секции конфигурации (`transcriber`, `summarizer`, `chat`,
`ai_level`, `summary_recipients`, `display_timezone`, `hand_queue`, `ai_level`, `summary_recipients`, `display_timezone`,
`registration_team_choice`, `registration_email_domain`, `contact_email`, `registration_team_choice`, `registration_email_domain`, `contact_email`,
`media_limits`) — `media_limits`) —
новая настройка не требует миграции, только новая строка. Бутстрап (`ensure_bootstrapped`) новая настройка не требует миграции, только новая строка. Бутстрап (`ensure_bootstrapped`)
@@ -28,6 +28,7 @@ from core.config import Settings
from core.plugins.config import ( from core.plugins.config import (
AiLevel, AiLevel,
ChatConfig, ChatConfig,
HandQueueConfig,
InstanceConfig, InstanceConfig,
MediaLimitsConfig, MediaLimitsConfig,
PluginsConfig, PluginsConfig,
@@ -45,6 +46,7 @@ from services.ai_tiers import TIERS
_KEY_TRANSCRIBER = "transcriber" _KEY_TRANSCRIBER = "transcriber"
_KEY_SUMMARIZER = "summarizer" _KEY_SUMMARIZER = "summarizer"
_KEY_CHAT = "chat" _KEY_CHAT = "chat"
_KEY_HAND_QUEUE = "hand_queue"
_KEY_AI_LEVEL = "ai_level" _KEY_AI_LEVEL = "ai_level"
_KEY_SUMMARY_RECIPIENTS = "summary_recipients" _KEY_SUMMARY_RECIPIENTS = "summary_recipients"
_KEY_DISPLAY_TIMEZONE = "display_timezone" _KEY_DISPLAY_TIMEZONE = "display_timezone"
@@ -100,6 +102,7 @@ class SettingsUpdateIn(BaseModel):
""" """
chat_enabled: bool | None = None chat_enabled: bool | None = None
hand_queue_enabled: bool | None = None
transcription_enabled: bool | None = None transcription_enabled: bool | None = None
ai_level: AiLevel | None = None ai_level: AiLevel | None = None
summary_recipients: SummaryRecipientsMode | None = None summary_recipients: SummaryRecipientsMode | None = None
@@ -154,6 +157,7 @@ def build_bootstrap_defaults(
_KEY_TRANSCRIBER: plugins.transcriber.model_dump(mode="json"), _KEY_TRANSCRIBER: plugins.transcriber.model_dump(mode="json"),
_KEY_SUMMARIZER: plugins.summarizer.model_dump(mode="json"), _KEY_SUMMARIZER: plugins.summarizer.model_dump(mode="json"),
_KEY_CHAT: plugins.chat.model_dump(mode="json"), _KEY_CHAT: plugins.chat.model_dump(mode="json"),
_KEY_HAND_QUEUE: plugins.hand_queue.model_dump(mode="json"),
_KEY_AI_LEVEL: dict(_DEFAULT_AI_LEVEL_VALUE), _KEY_AI_LEVEL: dict(_DEFAULT_AI_LEVEL_VALUE),
_KEY_SUMMARY_RECIPIENTS: dict(_DEFAULT_SUMMARY_RECIPIENTS_VALUE), _KEY_SUMMARY_RECIPIENTS: dict(_DEFAULT_SUMMARY_RECIPIENTS_VALUE),
_KEY_DISPLAY_TIMEZONE: dict(_DEFAULT_DISPLAY_TIMEZONE_VALUE), _KEY_DISPLAY_TIMEZONE: dict(_DEFAULT_DISPLAY_TIMEZONE_VALUE),
@@ -286,6 +290,10 @@ class InstanceSettingsService:
cfg.chat = ChatConfig(enabled=patch.chat_enabled) cfg.chat = ChatConfig(enabled=patch.chat_enabled)
await self._set(_KEY_CHAT, cfg.chat.model_dump(mode="json")) await self._set(_KEY_CHAT, cfg.chat.model_dump(mode="json"))
if patch.hand_queue_enabled is not None:
cfg.hand_queue = HandQueueConfig(enabled=patch.hand_queue_enabled)
await self._set(_KEY_HAND_QUEUE, cfg.hand_queue.model_dump(mode="json"))
if patch.registration_team_choice is not None: if patch.registration_team_choice is not None:
cfg.registration_team_choice = patch.registration_team_choice cfg.registration_team_choice = patch.registration_team_choice
await self._set( await self._set(
@@ -399,6 +407,7 @@ async def load_effective_config(session: AsyncSession) -> InstanceConfig:
transcriber=plugins.transcriber, transcriber=plugins.transcriber,
summarizer=plugins.summarizer, summarizer=plugins.summarizer,
chat=plugins.chat, chat=plugins.chat,
hand_queue=plugins.hand_queue,
) )
else: else:
cfg = _build_config(rows) cfg = _build_config(rows)
@@ -492,6 +501,7 @@ def _build_config(rows: dict[str, Any]) -> InstanceConfig:
transcriber=TranscriberConfig.model_validate(rows.get(_KEY_TRANSCRIBER, {})), transcriber=TranscriberConfig.model_validate(rows.get(_KEY_TRANSCRIBER, {})),
summarizer=SummarizerConfig.model_validate(rows.get(_KEY_SUMMARIZER, {})), summarizer=SummarizerConfig.model_validate(rows.get(_KEY_SUMMARIZER, {})),
chat=ChatConfig.model_validate(rows.get(_KEY_CHAT, {})), chat=ChatConfig.model_validate(rows.get(_KEY_CHAT, {})),
hand_queue=HandQueueConfig.model_validate(rows.get(_KEY_HAND_QUEUE, {})),
ai_level=rows.get(_KEY_AI_LEVEL, _DEFAULT_AI_LEVEL_VALUE).get("level", "min"), ai_level=rows.get(_KEY_AI_LEVEL, _DEFAULT_AI_LEVEL_VALUE).get("level", "min"),
summary_recipients=rows.get(_KEY_SUMMARY_RECIPIENTS, _DEFAULT_SUMMARY_RECIPIENTS_VALUE).get( summary_recipients=rows.get(_KEY_SUMMARY_RECIPIENTS, _DEFAULT_SUMMARY_RECIPIENTS_VALUE).get(
"mode", "all" "mode", "all"

View File

@@ -646,12 +646,17 @@ async def test_put_settings_partial_update(
response = await client.put( response = await client.put(
"/api/v1/admin/settings", "/api/v1/admin/settings",
json={"chat_enabled": False, "display_timezone": "Asia/Yekaterinburg"}, json={
"chat_enabled": False,
"hand_queue_enabled": False,
"display_timezone": "Asia/Yekaterinburg",
},
headers=_auth_headers(admin), headers=_auth_headers(admin),
) )
assert response.status_code == 200, response.text assert response.status_code == 200, response.text
body = response.json() body = response.json()
assert body["chat_enabled"] is False assert body["chat_enabled"] is False
assert body["hand_queue_enabled"] is False
assert body["display_timezone"] == "Asia/Yekaterinburg" assert body["display_timezone"] == "Asia/Yekaterinburg"
assert body["ai_level"] == "min" assert body["ai_level"] == "min"
assert body["transcription_queue_served"] is False assert body["transcription_queue_served"] is False

View File

@@ -8,13 +8,15 @@ import uuid
from collections.abc import Callable from collections.abc import Callable
from typing import Any from typing import Any
import httpx
from sqlalchemy.ext.asyncio import AsyncSession from sqlalchemy.ext.asyncio import AsyncSession
from core.security import hash_password from core.security import create_access_token, hash_password
from models.conference import Conference from models.conference import Conference
from models.guest import GuestAccess from models.guest import GuestAccess
from models.user import User from models.user import User
from services.conference_ids import generate_number, generate_slug from services.conference_ids import generate_number, generate_slug
from services.instance_settings import InstanceSettingsService, SettingsUpdateIn
from services.livekit_tokens import create_room_access_token from services.livekit_tokens import create_room_access_token
from tests.conftest import ASGIWebSocketSession from tests.conftest import ASGIWebSocketSession
@@ -270,3 +272,66 @@ async def test_organizer_joining_late_sees_already_raised_hands(
initial_queue = await _connect_auth_and_queue(ws_owner, _user_token(conference, owner)) initial_queue = await _connect_auth_and_queue(ws_owner, _user_token(conference, owner))
assert _identities(initial_queue) == [str(alice.id)] assert _identities(initial_queue) == [str(alice.id)]
# --- Отключаемый модуль (`instance_settings.hand_queue`) ---------------------
async def test_hand_queue_disabled_rejects_raise_and_lower(
db_session: AsyncSession, ws_client: WSFactory
) -> None:
"""Выключенный модуль — вторая линия защиты сверх фронта: `raise_hand`/
`lower_hand` отклоняются кодом `hand_queue_disabled`, очередь не меняется."""
conference = await _make_conference(db_session)
alice = await _make_user(db_session, name="Alice")
await db_session.commit()
await InstanceSettingsService(db_session).update(SettingsUpdateIn(hand_queue_enabled=False))
ws = ws_client(_chat_path(conference.id))
await _connect_auth_and_queue(ws, _user_token(conference, alice))
await ws.send_json({"type": "raise_hand"})
error = await ws.receive_json()
assert error == {"type": "error", "code": "hand_queue_disabled"}
await ws.send_json({"type": "lower_hand"})
error = await ws.receive_json()
assert error == {"type": "error", "code": "hand_queue_disabled"}
async def test_join_out_reflects_hand_queue_enabled_toggle(
client: httpx.AsyncClient, db_session: AsyncSession
) -> None:
user = await _make_user(db_session, name="Toggle Tester")
await db_session.commit()
headers = {"Authorization": f"Bearer {create_access_token(user.id, user.role)}"}
response = await client.post(
"/api/v1/conferences", json={"title": "Standup"}, headers=headers
)
assert response.status_code == 201, response.text
assert response.json()["join"]["hand_queue_enabled"] is True
await InstanceSettingsService(db_session).update(SettingsUpdateIn(hand_queue_enabled=False))
response = await client.post(
"/api/v1/conferences", json={"title": "Standup 2"}, headers=headers
)
assert response.status_code == 201, response.text
assert response.json()["join"]["hand_queue_enabled"] is False
async def test_guest_join_out_reflects_hand_queue_enabled(
client: httpx.AsyncClient, db_session: AsyncSession
) -> None:
conference = await _make_conference(db_session)
await db_session.commit()
await InstanceSettingsService(db_session).update(SettingsUpdateIn(hand_queue_enabled=False))
response = await client.post(
f"/api/v1/conferences/{conference.id}/guest-join", json={"display_name": "Dave"}
)
assert response.status_code == 200, response.text
assert response.json()["hand_queue_enabled"] is False

View File

@@ -65,6 +65,7 @@ _MANAGED_KEYS = (
"transcriber", "transcriber",
"summarizer", "summarizer",
"chat", "chat",
"hand_queue",
"ai_level", "ai_level",
"summary_recipients", "summary_recipients",
"display_timezone", "display_timezone",
@@ -121,6 +122,7 @@ async def test_ensure_bootstrapped_imports_yaml_defaults(
"transcriber", "transcriber",
"summarizer", "summarizer",
"chat", "chat",
"hand_queue",
"ai_level", "ai_level",
"summary_recipients", "summary_recipients",
"display_timezone", "display_timezone",
@@ -132,6 +134,9 @@ async def test_ensure_bootstrapped_imports_yaml_defaults(
cfg = await service.get() cfg = await service.get()
assert cfg.transcriber.provider == "faster_whisper_cpu" assert cfg.transcriber.provider == "faster_whisper_cpu"
assert cfg.ai_level == "min" assert cfg.ai_level == "min"
# Дефолт обязан сохранять поведение существующих инсталляций — модуль
# «поднятие руки» был доступен всегда, тоггл включён по умолчанию.
assert cfg.hand_queue.enabled is True
assert cfg.summary_recipients == "all" assert cfg.summary_recipients == "all"
assert cfg.display_timezone == "Europe/Moscow" assert cfg.display_timezone == "Europe/Moscow"
assert cfg.registration_team_choice is False assert cfg.registration_team_choice is False
@@ -162,6 +167,22 @@ async def test_ensure_bootstrapped_is_idempotent_and_keeps_admin_edits(
assert cfg.display_timezone == "Asia/Yekaterinburg" assert cfg.display_timezone == "Asia/Yekaterinburg"
async def test_update_hand_queue_enabled(
db_session: AsyncSession, clean_instance_settings: None
) -> None:
service = InstanceSettingsService(db_session)
await service.ensure_bootstrapped(PLUGINS_YAML)
cfg = await service.update(SettingsUpdateIn(hand_queue_enabled=False))
assert cfg.hand_queue.enabled is False
cfg = await service.get()
assert cfg.hand_queue.enabled is False
cfg = await service.update(SettingsUpdateIn(hand_queue_enabled=True))
assert cfg.hand_queue.enabled is True
@pytest.mark.parametrize( @pytest.mark.parametrize(
("preset", "chat_enabled", "ai_enabled", "ai_level"), ("preset", "chat_enabled", "ai_enabled", "ai_level"),
[ [

View File

@@ -33,3 +33,6 @@ summarizer:
chat: chat:
enabled: true enabled: true
hand_queue:
enabled: true

View File

@@ -89,7 +89,7 @@ services:
MEDIA_ROOT: ${MEDIA_ROOT:-/app/media} MEDIA_ROOT: ${MEDIA_ROOT:-/app/media}
# Версия инстанса (релиз v0.0.1) — install.sh копирует значение # Версия инстанса (релиз v0.0.1) — install.sh копирует значение
# из файла VERSION (корень репозитория) в .env; отдаётся в GET /api/health. # из файла VERSION (корень репозитория) в .env; отдаётся в GET /api/health.
VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.24} VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.29}
# Число процессов uvicorn (см. backend/Dockerfile). Дефолт 2 рассчитан # Число процессов uvicorn (см. backend/Dockerfile). Дефолт 2 рассчитан
# на 4-ядерный сервер, где ядра делятся с LiveKit. Поднимая значение, # на 4-ядерный сервер, где ядра делятся с LiveKit. Поднимая значение,
# проверьте бюджет соединений с БД: каждый воркер держит свой пул # проверьте бюджет соединений с БД: каждый воркер держит свой пул

View File

@@ -9,16 +9,32 @@
# запускайте ПЕРЕД `docker compose up` (и после каждого изменения .env, # запускайте ПЕРЕД `docker compose up` (и после каждого изменения .env,
# влияющего на эти конфиги) — из корня репозитория: # влияющего на эти конфиги) — из корня репозитория:
# ./deploy/render-templates.sh # ./deploy/render-templates.sh
#
# Источник значений можно подменить переменной ENV_FILE:
# ENV_FILE=.env.local ./deploy/render-templates.sh
# Это нужно для локальных стендов: корневой `.env` рабочего чекаута обычно
# держит боевые значения (LIVEKIT_NODE_IP/TURN_EXTERNAL_IP смотрят на прод), и
# рендерить конфиги из него для локального запуска нельзя. Без этой переменной
# путь был жёстко зашит, и локальные сессии повторяли логику скрипта вручную
# через envsubst — расхождение с реальным рендером ждало своего часа.
# По умолчанию — как раньше, `<корень репозитория>/.env`, поэтому install.sh
# и сервер ничего не замечают (свою переменную ENV_FILE install.sh не
# экспортирует, так что она сюда не протекает).
set -euo pipefail set -euo pipefail
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
ENV_FILE="$SCRIPT_DIR/../.env" # Относительный путь разрешаем от текущей директории вызова (`ENV_FILE=.env.local`
# из корня репозитория), абсолютный — как есть.
ENV_FILE="${ENV_FILE:-$SCRIPT_DIR/../.env}"
if [ ! -f "$ENV_FILE" ]; then if [ ! -f "$ENV_FILE" ]; then
echo "render-templates.sh: не найден $ENV_FILE — сначала запустите ./install.sh или скопируйте .env.example в .env" >&2 echo "render-templates.sh: не найден $ENV_FILE — сначала запустите ./install.sh или скопируйте .env.example в .env" >&2
echo "render-templates.sh: другой файл значений можно задать так: ENV_FILE=.env.local $0" >&2
exit 1 exit 1
fi fi
echo "[render] источник значений: $ENV_FILE"
# Читаем только нужные ключи через grep/cut (НЕ `source .env`) — .env содержит # Читаем только нужные ключи через grep/cut (НЕ `source .env`) — .env содержит
# значения вроде `SMTP_FROM=VidConf <no-reply@vidconf.example>`, где `<` — # значения вроде `SMTP_FROM=VidConf <no-reply@vidconf.example>`, где `<` —
# валидный литерал для docker-compose/pydantic, но невалидный bash-синтаксис # валидный литерал для docker-compose/pydantic, но невалидный bash-синтаксис

View File

@@ -191,6 +191,14 @@ chmod 600 .env # секреты внутри — только root может
собирает образы, поднимает `postgres`/`redis`, применяет миграции Alembic + собирает образы, поднимает `postgres`/`redis`, применяет миграции Alembic +
seed, поднимает остальной стек (`up -d --wait`). seed, поднимает остальной стек (`up -d --wait`).
По умолчанию `render-templates.sh` читает корневой `.env`. Другой файл
значений задаётся переменной окружения — это нужно, когда рядом с рабочим
`.env` (боевые адреса) поднимается локальный стенд:
```bash
ENV_FILE=.env.local ./deploy/render-templates.sh
```
**Не запускайте `docker compose` вручную без `--env-file .env`** — без него **Не запускайте `docker compose` вручную без `--env-file .env`** — без него
compose не подхватывает корневой `.env` (файл на уровень выше compose не подхватывает корневой `.env` (файл на уровень выше
`deploy/docker-compose.yml`) и подставляет небезопасные дефолты из самого `deploy/docker-compose.yml`) и подставляет небезопасные дефолты из самого

View File

@@ -19,6 +19,8 @@ export interface AiLevelStatus {
/** Эффективные настройки инстанса. */ /** Эффективные настройки инстанса. */
export interface SettingsOut { export interface SettingsOut {
chat_enabled: boolean chat_enabled: boolean
/** Включён ли модуль «поднятие руки» — кнопка «Рука» и очередь целиком. */
hand_queue_enabled: boolean
/** Единый переключатель модуля AI (транскрибация + суммаризация). */ /** Единый переключатель модуля AI (транскрибация + суммаризация). */
transcription_enabled: boolean transcription_enabled: boolean
/** Есть ли хотя бы один Celery-воркер, обслуживающий очередь транскрибации. */ /** Есть ли хотя бы один Celery-воркер, обслуживающий очередь транскрибации. */
@@ -48,6 +50,7 @@ export interface SettingsOut {
/** Тело частичного обновления настроек инстанса — все поля опциональны. */ /** Тело частичного обновления настроек инстанса — все поля опциональны. */
export interface SettingsUpdateIn { export interface SettingsUpdateIn {
chat_enabled?: boolean chat_enabled?: boolean
hand_queue_enabled?: boolean
transcription_enabled?: boolean transcription_enabled?: boolean
/** Недоступный уровень (см. `ai_levels`) — backend отвечает 400. */ /** Недоступный уровень (см. `ai_levels`) — backend отвечает 400. */
ai_level?: AiLevel ai_level?: AiLevel

View File

@@ -61,6 +61,8 @@ export interface ConferenceJoinData {
conference_id: string conference_id: string
/** Включён ли чат для этой конференции — при `false` панель/кнопка чата не рендерятся. */ /** Включён ли чат для этой конференции — при `false` панель/кнопка чата не рендерятся. */
chat_enabled: boolean chat_enabled: boolean
/** Включён ли модуль «поднятие руки» — при `false` кнопка «Рука» и очередь не рендерятся. */
hand_queue_enabled: boolean
/** Потолок качества публикации видео на момент входа — см. `PublishQualityCap`. */ /** Потолок качества публикации видео на момент входа — см. `PublishQualityCap`. */
publish_quality_cap: PublishQualityCap publish_quality_cap: PublishQualityCap
/** Максимум одновременно видимых плиток сцены (`StageGrid`) на момент входа. */ /** Максимум одновременно видимых плиток сцены (`StageGrid`) на момент входа. */

View File

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

View File

@@ -11,7 +11,7 @@ interface DeviceSettingsDialogProps extends StageViewProps {
onClose: () => void onClose: () => void
} }
/** Свайп ручки шторки вниз дальше этого порога (px) закрывает панель, меньше — она возвращается на место. */ /** Свайп панели вниз дальше этого порога (px) закрывает шторку, меньше — она возвращается на место. */
const SHEET_DISMISS_THRESHOLD_PX = 80 const SHEET_DISMISS_THRESHOLD_PX = 80
/** Человекочитаемая подпись пункта списка устройств — `label` пуст, пока нет разрешения на медиа. */ /** Человекочитаемая подпись пункта списка устройств — `label` пуст, пока нет разрешения на медиа. */
@@ -30,7 +30,13 @@ function deviceLabel(device: MediaDeviceInfo, index: number, fallback: string):
* `deviceId` при следующем подключении. * `deviceId` при следующем подключении.
* *
* На мобильной ширине (`useIsCompactViewport`) рендерится шторкой снизу вместо * На мобильной ширине (`useIsCompactViewport`) рендерится шторкой снизу вместо
* модалки — по клику вне, Escape (`useModalDismiss`) и свайпу вниз за ручку. * модалки — по клику вне, Escape (`useModalDismiss`) и свайпу вниз по ЛЮБОМУ
* месту панели (не только за ручку-волосок `.room-sheet-handle` — та её не
* пережила бы: 40×4px, попасть пальцем почти нереально). Свайп срабатывает,
* только если содержимое панели проскроллено в самый верх (`scrollTop === 0`
* на touchstart, см. `dragEligibleRef`) — иначе палец должен листать список
* устройств, а не закрывать окно; решение фиксируется на весь жест, а не
* пересчитывается на каждый touchmove, как в любом стандартном bottom sheet.
* Десктоп не меняется. * Десктоп не меняется.
* *
* Там же, и только там, первой секцией идёт «Вид» (режим показа участников и * Там же, и только там, первой секцией идёт «Вид» (режим показа участников и
@@ -61,6 +67,12 @@ export function DeviceSettingsDialog({
useModalDismiss(onClose) useModalDismiss(onClose)
const dragStartYRef = useRef<number | null>(null) const dragStartYRef = useRef<number | null>(null)
// Жест начат, когда контент панели был проскроллен в самый верх — свайп по
// панели, у которой ещё есть что скроллить, должен листать содержимое, а не
// закрывать шторку. Решается ОДИН раз в touchstart и держится весь жест
// (даже если внутри него направление сменится) — так же, как в любом
// стандартном bottom sheet.
const dragEligibleRef = useRef(false)
const [dragOffset, setDragOffset] = useState(0) const [dragOffset, setDragOffset] = useState(0)
const [isDragging, setIsDragging] = useState(false) const [isDragging, setIsDragging] = useState(false)
@@ -92,18 +104,21 @@ export function DeviceSettingsDialog({
} }
} }
function handleHandleTouchStart(e: React.TouchEvent<HTMLDivElement>) { function handlePanelTouchStart(e: React.TouchEvent<HTMLDivElement>) {
dragEligibleRef.current = e.currentTarget.scrollTop === 0
if (!dragEligibleRef.current) return
dragStartYRef.current = e.touches[0].clientY dragStartYRef.current = e.touches[0].clientY
setIsDragging(true) setIsDragging(true)
} }
function handleHandleTouchMove(e: React.TouchEvent<HTMLDivElement>) { function handlePanelTouchMove(e: React.TouchEvent<HTMLDivElement>) {
if (dragStartYRef.current === null) return if (!dragEligibleRef.current || dragStartYRef.current === null) return
const delta = e.touches[0].clientY - dragStartYRef.current const delta = e.touches[0].clientY - dragStartYRef.current
if (delta > 0) setDragOffset(delta) if (delta > 0) setDragOffset(delta)
} }
function handleHandleTouchEnd() { function handlePanelTouchEnd() {
if (!dragEligibleRef.current) return
if (dragOffset > SHEET_DISMISS_THRESHOLD_PX) { if (dragOffset > SHEET_DISMISS_THRESHOLD_PX) {
onClose() onClose()
return return
@@ -124,20 +139,16 @@ export function DeviceSettingsDialog({
<div <div
className={isCompact ? 'room-sheet-panel' : 'room-modal-panel'} className={isCompact ? 'room-sheet-panel' : 'room-modal-panel'}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onTouchStart={isCompact ? handlePanelTouchStart : undefined}
onTouchMove={isCompact ? handlePanelTouchMove : undefined}
onTouchEnd={isCompact ? handlePanelTouchEnd : undefined}
style={ style={
isCompact && dragOffset isCompact && dragOffset
? { transform: `translateY(${dragOffset}px)`, transition: isDragging ? 'none' : undefined } ? { transform: `translateY(${dragOffset}px)`, transition: isDragging ? 'none' : undefined }
: undefined : undefined
} }
> >
{isCompact && ( {isCompact && <div className="room-sheet-handle" />}
<div
className="room-sheet-handle"
onTouchStart={handleHandleTouchStart}
onTouchMove={handleHandleTouchMove}
onTouchEnd={handleHandleTouchEnd}
/>
)}
<div className="room-modal-head"> <div className="room-modal-head">
<h2 id="device-settings-title">{isCompact ? 'Настройки' : 'Настройки устройств'}</h2> <h2 id="device-settings-title">{isCompact ? 'Настройки' : 'Настройки устройств'}</h2>

View File

@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { Hand, ListOrdered } from 'lucide-react' import { Hand, ListOrdered } from 'lucide-react'
import { useLocalParticipant } from '@livekit/components-react'
import { useIsOrganizer } from '@/hooks/useIsOrganizer' import { useIsOrganizer } from '@/hooks/useIsOrganizer'
import type { HandQueueEntry } from '@/hooks/useChat' 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, поповер * собственное состояние открытия, закрытие по клику вне/Escape, поповер
* `.tb-menu` над кнопкой — а не боковая панель на весь экран (как чат): * `.tb-menu` над кнопкой — а не боковая панель на весь экран (как чат):
* очередь рук — короткий список, а не история переписки, разворачивать её * очередь рук — короткий список, а не история переписки, разворачивать её
@@ -19,11 +27,12 @@ interface HandQueueMenuProps {
* Размер поповера подстраивается под число записей — `.hand-queue-list` * Размер поповера подстраивается под число записей — `.hand-queue-list`
* растёт вместе со списком и не даёт пустого места при 12 поднятых руках, * растёт вместе со списком и не даёт пустого места при 12 поднятых руках,
* но не бесконечно: после ~10 строк список упирается в `max-height` и дальше * но не бесконечно: после ~10 строк список упирается в `max-height` и дальше
* скроллится (см. room.css) — иначе организатор на энергичной встрече * скроллится (см. room.css) — иначе участник на энергичной встрече получил
* получил бы поповер выше экрана. * бы поповер выше экрана.
*/ */
export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) { export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
const isOrganizer = useIsOrganizer() const isOrganizer = useIsOrganizer()
const { localParticipant } = useLocalParticipant()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const wrapRef = useRef<HTMLDivElement>(null) const wrapRef = useRef<HTMLDivElement>(null)
@@ -47,8 +56,6 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
} }
}, [open]) }, [open])
if (!isOrganizer) return null
return ( return (
<div className="tb-menu-wrap" ref={wrapRef}> <div className="tb-menu-wrap" ref={wrapRef}>
<button <button
@@ -74,22 +81,28 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
<p className="chat-empty">Пока никто не поднял руку</p> <p className="chat-empty">Пока никто не поднял руку</p>
) : ( ) : (
<ol className="hand-queue-list"> <ol className="hand-queue-list">
{queue.map((entry, index) => ( {queue.map((entry, index) => {
<li className="hand-queue-item" key={entry.identity}> const isOwn = entry.identity === localParticipant.identity
<span className="hand-queue-position">{index + 1}</span> const canLower = isOrganizer || isOwn
<span className="hand-queue-name"> return (
<Hand className="lucide" aria-hidden="true" /> <li className="hand-queue-item" key={entry.identity}>
{entry.name} <span className="hand-queue-position">{index + 1}</span>
</span> <span className="hand-queue-name">
<button <Hand className="lucide" aria-hidden="true" />
type="button" {entry.name}
className="hand-queue-lower" </span>
onClick={() => onLower(entry.identity)} {canLower && (
> <button
Опустить type="button"
</button> className="hand-queue-lower"
</li> onClick={() => onLower(entry.identity)}
))} >
Опустить
</button>
)}
</li>
)
})}
</ol> </ol>
)} )}
</div> </div>

View File

@@ -126,8 +126,10 @@ function TileBody({
const showSharingChip = Boolean( const showSharingChip = Boolean(
onStopSharing && trackReference.source === Track.Source.ScreenShare && trackReference.participant.isLocal, onStopSharing && trackReference.source === Track.Source.ScreenShare && trackReference.participant.isLocal,
) )
// Кнопка закрепления — только там, где сцена умеет закрепление (основное // Кнопка закрепления — только там, где сцена её даёт (основное окно передаёт
// окно передаёт `onTogglePin`; в мини-плеере плитка одна, закреплять нечего). // `onTogglePin`; в мини-плеере своего тулбара нет и плитка одна, поэтому
// булавки там нет — само закрепление, сделанное в основном окне, с 0.0.25
// действует и в мини-плеере, см. `initialPinnedKey` в `RoomStage`).
// Ключ плитки берём из её собственного трека: в карусели/гриде плитки // Ключ плитки берём из её собственного трека: в карусели/гриде плитки
// рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать. // рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать.
const tileKey = stageTrackKey(trackReference) const tileKey = stageTrackKey(trackReference)
@@ -200,10 +202,8 @@ function TileBody({
type="button" type="button"
className={`room-pin-toggle${isPinned ? ' is-pinned' : ''}`} className={`room-pin-toggle${isPinned ? ' is-pinned' : ''}`}
aria-pressed={isPinned} aria-pressed={isPinned}
title={isPinned ? 'Открепить' : 'Закрепить в основном окне'} title={isPinned ? 'Открепить' : 'Закрепить'}
aria-label={ aria-label={isPinned ? `Открепить: ${displayName}` : `Закрепить: ${displayName}`}
isPinned ? `Открепить: ${displayName}` : `Закрепить в основном окне: ${displayName}`
}
onClick={(e) => { onClick={(e) => {
// Иначе клик долетит до самой плитки (`onParticipantClick` // Иначе клик долетит до самой плитки (`onParticipantClick`
// у `ParticipantTile`) — булавка не должна означать «клик по плитке». // у `ParticipantTile`) — булавка не должна означать «клик по плитке».

View File

@@ -1,10 +1,9 @@
import { useEffect, useState, type ReactNode } from 'react' import { useEffect, useState, type ReactNode } from 'react'
import { EyeOff, Mic, MicOff, Users } from 'lucide-react' import { EyeOff, Mic, MicOff, ScreenShare, ScreenShareOff, Users } from 'lucide-react'
import { Track, type Participant } from 'livekit-client' import { Track, type Participant } from 'livekit-client'
import { import {
CarouselLayout, CarouselLayout,
FocusLayoutContainer, FocusLayoutContainer,
RoomAudioRenderer,
isTrackReference, isTrackReference,
useRoomContext, useRoomContext,
useSpeakingParticipants, useSpeakingParticipants,
@@ -14,8 +13,10 @@ import {
} from '@livekit/components-react' } from '@livekit/components-react'
import { RoomParticipantTile } from '@/components/room/RoomParticipantTile' import { RoomParticipantTile } from '@/components/room/RoomParticipantTile'
import { StageGrid } from '@/components/room/StageGrid' import { StageGrid } from '@/components/room/StageGrid'
import { useToast } from '@/components/ui/ToastProvider'
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport' import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus' import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus'
import { SCREEN_SHARE_CAPTURE_OPTIONS } from '@/lib/screenShareOptions'
import type { StageLayoutMode } from '@/lib/stageLayoutMode' import type { StageLayoutMode } from '@/lib/stageLayoutMode'
/** /**
@@ -44,9 +45,11 @@ const STAGE_TRACK_SOURCES = [
] ]
/** /**
* Удержание фокуса основного окна при смене говорящего, мс. * Удержание фокуса при смене говорящего, мс. Действует в ОБОИХ вариантах
* сцены — и в основном окне, и в мини-плеере (до 0.0.25 в PiP удержания не
* было вовсе, фокус там переключался мгновенно).
* *
* Основное окно следует за спикером (`followSpeaker`, задача 3.2), и без * Сцена следует за спикером (`followSpeaker`, задача 3.2), и без
* удержания короткие реплики («ага», «угу») уводили бы большую плитку на * удержания короткие реплики («ага», «угу») уводили бы большую плитку на
* секунду и возвращали обратно. Источник говорящих (`useSpeakingParticipants` * секунду и возвращали обратно. Источник говорящих (`useSpeakingParticipants`
* поверх `RoomEvent.ActiveSpeakersChanged`) сам по себе не дребезжит, но * поверх `RoomEvent.ActiveSpeakersChanged`) сам по себе не дребезжит, но
@@ -59,6 +62,10 @@ const STAGE_TRACK_SOURCES = [
* фокус с задержкой, которая на глаз читается как плавность, а не как тормоз. * фокус с задержкой, которая на глаз читается как плавность, а не как тормоз.
* Меньше (~0.6 с) — короткие «ага» всё ещё пролезают, больше (~2 с) — заметно * Меньше (~0.6 с) — короткие «ага» всё ещё пролезают, больше (~2 с) — заметно
* запаздывает переход на нового докладчика. * запаздывает переход на нового докладчика.
*
* В мини-плеере удержание тем более уместно: там плитка ОДНА, и мгновенное
* переключение читается не как «камера следует за разговором», а как мигание
* всего окна целиком.
*/ */
const SPEAKER_HOLD_MS = 1200 const SPEAKER_HOLD_MS = 1200
@@ -69,8 +76,9 @@ const SPEAKER_HOLD_MS = 1200
* применять уже нечего (cleanup эффекта гасит таймер, а новое значение * применять уже нечего (cleanup эффекта гасит таймер, а новое значение
* сравнивается по ссылке с текущим). * сравнивается по ссылке с текущим).
* *
* `holdMs <= 0` — удержания нет, значение отдаётся как есть (режим PiP: там * `holdMs <= 0` — удержания нет, значение отдаётся как есть. Сейчас этим
* фокус обязан следовать за говорящим мгновенно, поведение не менялось). * режимом никто не пользуется (обе сцены удерживают состав), но параметр
* оставлен: он и делает функцию пригодной для повторного использования.
*/ */
function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant[] { function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant[] {
const [steady, setSteady] = useState(speakers) const [steady, setSteady] = useState(speakers)
@@ -109,7 +117,7 @@ function PipMicToggle() {
<button <button
type="button" type="button"
{...mic.buttonProps} {...mic.buttonProps}
className={`room-pip-mic-toggle${mic.enabled ? '' : ' is-off'}`} className={`room-pip-btn room-pip-mic-toggle${mic.enabled ? '' : ' is-off'}`}
aria-label={mic.enabled ? 'Выключить микрофон' : 'Включить микрофон'} aria-label={mic.enabled ? 'Выключить микрофон' : 'Включить микрофон'}
> >
{mic.enabled ? <Mic className="lucide" aria-hidden="true" /> : <MicOff className="lucide" aria-hidden="true" />} {mic.enabled ? <Mic className="lucide" aria-hidden="true" /> : <MicOff className="lucide" aria-hidden="true" />}
@@ -117,6 +125,59 @@ function PipMicToggle() {
) )
} }
/**
* Кнопка демонстрации экрана в мини-плеере — сестра `PipMicToggle` (0.0.29).
* Тот же `useTrackToggle` и те же `SCREEN_SHARE_CAPTURE_OPTIONS`, что у кнопки
* основного тулбара (`RoomToolbar`), поэтому обе кнопки — два вида одного
* состояния: включённая из мини-окна демонстрация показывает основную кнопку
* активной и наоборот, рассинхрону взяться неоткуда (состояние читается из
* `RoomContext`, а не из DOM).
*
* 🔬 ПОЧЕМУ ЭТО ВООБЩЕ РАБОТАЕТ ИЗ ДРУГОГО ОКНА. `getDisplayMedia()` требует
* транзиентной активации пользователя, а клик здесь происходит в PiP-окне,
* тогда как сам код (React-дерево целиком остаётся в основном документе,
* порталом уезжает только DOM) вызывает `navigator` ОСНОВНОГО окна. Замерено
* в Chrome 150 отдельной пробой: после клика в Document PiP
* `navigator.userActivation.isActive === true` в ОБОИХ окнах — активация
* доезжает до опенера, вызов проходит, системный пикер выбора экрана
* открывается отдельным окном поверх остальных (а не прячется за заглушкой
* «Конференция открыта в отдельном мини-окне» в основном окне). Проверять это
* пришлось живьём: спецификация такого поведения не обещает, и на других
* движках оно может отличаться — но Document PiP есть только в Chrome/Edge,
* так что других движков здесь и не бывает (в Safari мини-окно — нативный
* video-PiP без собственного DOM, кнопке там просто негде жить, в Firefox
* мини-окна нет вовсе).
*
* Ошибку показываем тостом основного окна: пользователь его сейчас не видит
* (там заглушка), но увидит, как только вернётся, — а единственный частый
* «сбой», отмена пикера, и так молча игнорируется, как в основном тулбаре.
*/
function PipScreenShareToggle() {
const toast = useToast()
const screenShare = useTrackToggle({
source: Track.Source.ScreenShare,
captureOptions: SCREEN_SHARE_CAPTURE_OPTIONS,
onDeviceError: (error) => {
if (error.name === 'NotAllowedError') return
toast.show('Не удалось начать демонстрацию экрана', 'error')
},
})
return (
<button
type="button"
{...screenShare.buttonProps}
className={`room-pip-btn room-pip-share-toggle${screenShare.enabled ? ' is-on' : ''}`}
aria-label={screenShare.enabled ? 'Остановить демонстрацию экрана' : 'Демонстрация экрана'}
>
{screenShare.enabled ? (
<ScreenShareOff className="lucide" aria-hidden="true" />
) : (
<ScreenShare className="lucide" aria-hidden="true" />
)}
</button>
)
}
/** /**
* Основная сцена конференции: превью остальных участников + крупная плитка * Основная сцена конференции: превью остальных участников + крупная плитка
* активного спикера (FocusLayoutContainer + CarouselLayout при нескольких * активного спикера (FocusLayoutContainer + CarouselLayout при нескольких
@@ -148,9 +209,9 @@ function PipMicToggle() {
* `tiles` скрывать нечего (карусели нет), переключатель там заблокирован — * `tiles` скрывать нечего (карусели нет), переключатель там заблокирован —
* см. `StageViewOptions`. * см. `StageViewOptions`.
* *
* ФОКУС ПЕРЕЖИВАЕТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере — ОТДЕЛЬНЫЙ * ФОКУС И ЗАКРЕПЛЕНИЕ ПЕРЕЖИВАЮТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере —
* экземпляр этого компонента (портал в PiP-окно), и своё состояние фокуса он * ОТДЕЛЬНЫЙ экземпляр этого компонента (портал в PiP-окно), и своё состояние
* начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и * фокуса он начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и
* `pickStageFocus` доходил до последнего фолбэка `localKey`, то есть мини-окно * `pickStageFocus` доходил до последнего фолбэка `localKey`, то есть мини-окно
* открывалось на самом пользователе вместо того, что он видел крупно. В Safari * открывалось на самом пользователе вместо того, что он видел крупно. В Safari
* бага не было видно: там Document PiP не используется, а video-фолбэк * бага не было видно: там Document PiP не используется, а video-фолбэк
@@ -159,6 +220,13 @@ function PipMicToggle() {
* `RoomPage` → `initialFocusKey` следующего экземпляра. Работает в обе стороны * `RoomPage` → `initialFocusKey` следующего экземпляра. Работает в обе стороны
* — возврат из мини-плеера тоже не сбрасывает фокус. * — возврат из мини-плеера тоже не сбрасывает фокус.
* *
* Ровно тем же мостиком с 0.0.25 ездит и ЗАКРЕПЛЕНИЕ (`initialPinnedKey` /
* `onPinnedKeyChange`): раньше `pinnedKey` был чисто локальным `useState`, и
* закрепление, сделанное в основном окне, в мини-плеер не попадало вовсе.
* Отдельный «общий» источник правды здесь не нужен: экземпляр сцены в каждый
* момент ровно один (пока открыт Document PiP, основное окно показывает
* заглушку — см. `RoomPage`), поэтому состояние достаточно передать по эстафете.
*
* Раскладка — вертикальная колонка миниатюр слева от основной сцены (не * Раскладка — вертикальная колонка миниатюр слева от основной сцены (не
* горизонтальная лента, см. design/mockups/room.html после правки: узкая * горизонтальная лента, см. design/mockups/room.html после правки: узкая
* колонка сбоку, скролл по вертикали). Это штатное поведение самого * колонка сбоку, скролл по вертикали). Это штатное поведение самого
@@ -188,12 +256,21 @@ function PipMicToggle() {
* показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида; * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида;
* режимы показа и скрытие остальных на мини-плеер не влияют вовсе. * режимы показа и скрытие остальных на мини-плеер не влияют вовсе.
* *
* Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у * ВЫБОР ФОКУСА ОДИНАКОВ В ОБОИХ ВАРИАНТАХ (с 0.0.25). До этого мини-плеер был
* `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному: * намеренно «упрощён»: без удержания говорящего, без удержания демонстрации
* PiP переключается мгновенно и всегда показывает говорящего, а основное окно * экрана (`holdScreenShare`), без приоритета говорящего с включённой камерой и
* ждёт `SPEAKER_HOLD_MS` (не дёргается на коротких репликах), не уводит из * без закрепления. На практике это читалось как поломка: в мини-окне
* фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление * демонстрация экрана слетала от любой чужой реплики, а закрепление,
* участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке. * сделанное в основном окне, не действовало. Теперь `pickStageFocus`
* получает одни и те же правила независимо от варианта — разным остаётся
* ровно одно: `localKey` (см. ниже) и то, что PiP рисует одну плитку вместо
* раскладки.
*
* Единственное сознательное отличие — `localKey`: у мини-плеера есть
* последний фолбэк «показать себя», у основного окна его нет (там фолбэк —
* первый трек по порядку, поведение не менялось). Строка из того же сюжета,
* что и `initialFocusKey`: без неё свежеоткрытое мини-окно на пустой комнате
* выбирало произвольного участника.
*/ */
export function RoomStage({ export function RoomStage({
variant = 'full', variant = 'full',
@@ -203,6 +280,8 @@ export function RoomStage({
onHideOthers, onHideOthers,
initialFocusKey = null, initialFocusKey = null,
onFocusKeyChange, onFocusKeyChange,
initialPinnedKey = null,
onPinnedKeyChange,
onPinFocus, onPinFocus,
raisedHandIdentities, raisedHandIdentities,
conferenceId, conferenceId,
@@ -221,6 +300,10 @@ export function RoomStage({
initialFocusKey?: string | null initialFocusKey?: string | null
/** Сообщать наружу текущий фокус, чтобы его пережил переезд сцены в мини-плеер и обратно. */ /** Сообщать наружу текущий фокус, чтобы его пережил переезд сцены в мини-плеер и обратно. */
onFocusKeyChange?: (key: string | null) => void onFocusKeyChange?: (key: string | null) => void
/** Чем инициализировать закрепление при монтировании — тот же мостик через `RoomPage`, что и у фокуса. */
initialPinnedKey?: string | null
/** Сообщать наружу закрепление, чтобы оно пережило переезд сцены в мини-плеер и обратно. */
onPinnedKeyChange?: (key: string | null) => void
/** /**
* Участника только что закрепили (не открепили) в режиме без крупной * Участника только что закрепили (не открепили) в режиме без крупной
* плитки — сцена сама переключиться не может (режим живёт в `RoomPage`), * плитки — сцена сама переключиться не может (режим живёт в `RoomPage`),
@@ -245,9 +328,9 @@ export function RoomStage({
// (`Room.activeSpeakers`, обновляются по `RoomEvent.ActiveSpeakersChanged`, // (`Room.activeSpeakers`, обновляются по `RoomEvent.ActiveSpeakersChanged`,
// событие шлётся лишь при РЕАЛЬНОЙ смене состава/порядка говорящих — не // событие шлётся лишь при РЕАЛЬНОЙ смене состава/порядка говорящих — не
// дребезжит на каждый чих, в отличие от сырого `participant.isSpeaking`). // дребезжит на каждый чих, в отличие от сырого `participant.isSpeaking`).
// Основное окно поверх этого ещё и удерживает состав (см. `useSteadySpeakers` // Поверх этого сцена ещё и удерживает состав (см. `useSteadySpeakers` и
// и `SPEAKER_HOLD_MS`), PiP берёт значение как есть. // `SPEAKER_HOLD_MS`) — в обоих вариантах одинаково.
const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), variant === 'pip' ? 0 : SPEAKER_HOLD_MS) const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), SPEAKER_HOLD_MS)
const cameraTracks = tracks.filter((t) => t.source === Track.Source.Camera) const cameraTracks = tracks.filter((t) => t.source === Track.Source.Camera)
const screenShareTracks = tracks.filter((t) => isTrackReference(t) && t.source === Track.Source.ScreenShare) const screenShareTracks = tracks.filter((t) => isTrackReference(t) && t.source === Track.Source.ScreenShare)
@@ -289,8 +372,10 @@ export function RoomStage({
const [focusKey, setFocusKey] = useState<string | null>(initialFocusKey) const [focusKey, setFocusKey] = useState<string | null>(initialFocusKey)
// Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source` // Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
// плитки, которую пользователь закрепил булавкой; `null` — закрепления нет. // плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
// Только для основного окна — в PiP плитка одна и закреплять нечего. // Стартовое значение приходит от предыдущего экземпляра сцены (тот же
const [pinnedKey, setPinnedKey] = useState<string | null>(null) // мостик через `RoomPage`, что и у фокуса), поэтому закрепление, сделанное
// в основном окне, действует и в мини-плеере.
const [pinnedKey, setPinnedKey] = useState<string | null>(initialPinnedKey)
const [prevPinnedKey, setPrevPinnedKey] = useState<string | null>(null) const [prevPinnedKey, setPrevPinnedKey] = useState<string | null>(null)
const cameraKeys = cameraTracks.map(stageTrackKey) const cameraKeys = cameraTracks.map(stageTrackKey)
@@ -299,13 +384,23 @@ export function RoomStage({
// камера есть у КАЖДОГО участника хотя бы плейсхолдером, — ни среди // камера есть у КАЖДОГО участника хотя бы плейсхолдером, — ни среди
// демонстраций) — закрепление снимаем, чтобы сцена не осталась в подвешенном // демонстраций) — закрепление снимаем, чтобы сцена не осталась в подвешенном
// состоянии и булавка не «висела» на исчезнувшем ключе. // состоянии и булавка не «висела» на исчезнувшем ключе.
//
// `tracksKnown` — обязательная охрана, а не перестраховка: на ПЕРВОМ рендере
// нового экземпляра сцены `useTracks` отдаёт ПУСТОЙ массив (реальный состав
// приезжает следующим рендером, из подписки на события комнаты). Без этой
// проверки пустой набор читается как «все вышли», и закрепление, приехавшее
// через `initialPinnedKey`, обнулялось сразу при монтировании — то есть
// мини-плеер терял его каждый раз (найдено живой отладкой при 0.0.25).
// Пустых наборов при живой комнате не бывает: камера есть у каждого
// участника хотя бы плейсхолдером.
const tracksKnown = cameraKeys.length > 0 || screenShareKeys.length > 0
const pinnedAlive = pinnedKey !== null && (cameraKeys.includes(pinnedKey) || screenShareKeys.includes(pinnedKey)) const pinnedAlive = pinnedKey !== null && (cameraKeys.includes(pinnedKey) || screenShareKeys.includes(pinnedKey))
const tracksChanged = tracks !== prevTracks const tracksChanged = tracks !== prevTracks
const speakingChanged = speakingParticipants !== prevSpeakingParticipants const speakingChanged = speakingParticipants !== prevSpeakingParticipants
const pinnedChanged = pinnedKey !== prevPinnedKey const pinnedChanged = pinnedKey !== prevPinnedKey
if (pinnedKey !== null && !pinnedAlive) { if (pinnedKey !== null && tracksKnown && !pinnedAlive) {
setPinnedKey(null) setPinnedKey(null)
} }
@@ -328,14 +423,12 @@ export function RoomStage({
cameraKeys, cameraKeys,
screenShareKeys, screenShareKeys,
speakingCameraKeys, speakingCameraKeys,
// Приоритет «говорящий с камерой выше говорящего без камеры» — только cameraKeysWithVideo: cameraTracks.filter(hasLiveVideo).map(stageTrackKey),
// основному окну: PiP по договорённости ведёт себя ровно как раньше.
cameraKeysWithVideo: variant === 'pip' ? [] : cameraTracks.filter(hasLiveVideo).map(stageTrackKey),
prevKeys, prevKeys,
prevFocusKey: focusKey, prevFocusKey: focusKey,
pinnedKey: pinnedAlive ? pinnedKey : null, pinnedKey: pinnedAlive ? pinnedKey : null,
followSpeaker: true, followSpeaker: true,
holdScreenShare: variant !== 'pip', holdScreenShare: true,
// Только для PiP — в основном окне фолбэк на «первый трек» не менялся. // Только для PiP — в основном окне фолбэк на «первый трек» не менялся.
localKey: variant === 'pip' ? `${room.localParticipant.identity}:${Track.Source.Camera}` : null, localKey: variant === 'pip' ? `${room.localParticipant.identity}:${Track.Source.Camera}` : null,
}) })
@@ -352,6 +445,11 @@ export function RoomStage({
onFocusKeyChange?.(focusKey) onFocusKeyChange?.(focusKey)
}, [focusKey, onFocusKeyChange]) }, [focusKey, onFocusKeyChange])
// То же самое для закрепления — см. `initialPinnedKey`.
useEffect(() => {
onPinnedKeyChange?.(pinnedKey)
}, [pinnedKey, onPinnedKeyChange])
const focusTrack = tracks.find((t) => stageTrackKey(t) === focusKey) ?? screenShareTracks[0] ?? cameraTracks[0] const focusTrack = tracks.find((t) => stageTrackKey(t) === focusKey) ?? screenShareTracks[0] ?? cameraTracks[0]
const focusTrackKey = focusTrack ? stageTrackKey(focusTrack) : null const focusTrackKey = focusTrack ? stageTrackKey(focusTrack) : null
// При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И // При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И
@@ -394,13 +492,30 @@ export function RoomStage({
// Мини-плеер показывает ТОЛЬКО активное окно — без карусели/ // Мини-плеер показывает ТОЛЬКО активное окно — без карусели/
// грида, одна плитка на весь контейнер (см. `.room-single-tile`, // грида, одна плитка на весь контейнер (см. `.room-single-tile`,
// `styles/room.css`). `focusTrack` уже вычислен выше тем же `pickStageFocus` // `styles/room.css`). `focusTrack` уже вычислен выше тем же `pickStageFocus`
// (с `followSpeaker: true` для этого варианта) — переиспользуем как есть. // и по тем же правилам, что и в основном окне (закрепление, удержание
// демонстрации, антидребезг говорящего) — переиспользуем как есть.
// Булавки на плитке здесь нет намеренно: своего тулбара у мини-окна нет,
// закрепление делается в основном окне и приезжает сюда через
// `initialPinnedKey`. А вот микрофон и демонстрация экрана в мини-окне есть:
// это не «вид», а действия, которые нужны прямо посреди разговора, и ради них
// разворачивать основное окно (то есть закрывать мини-окно) бессмысленно.
//
// СОБСТВЕННАЯ ДЕМОНСТРАЦИЯ в мини-окне ПОКАЗЫВАЕТСЯ — по тем же правилам
// `pickStageFocus`, что и в основном окне (last-wins на старте, возврат на
// говорящего/закреплённого после остановки). Решение оператора при приёмке
// 0.0.29: демонстратор должен видеть, что именно он демонстрирует, ровно то
// же, что видят остальные. Пробная версия прятала свой шэр из PiP (чтобы
// вместо него была видна аудитория и чтобы при выборе «весь экран» не
// получался зеркальный туннель «мини-окно внутри мини-окна») — отклонена.
// Туннель при выборе «весь экран» остаётся известным и принятым поведением.
if (variant === 'pip') { if (variant === 'pip') {
return ( return (
<section className="stage room-single-tile"> <section className="stage room-single-tile">
{focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />} {focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />}
<PipMicToggle /> <div className="room-pip-controls">
<RoomAudioRenderer /> <PipMicToggle />
<PipScreenShareToggle />
</div>
</section> </section>
) )
} }
@@ -496,7 +611,6 @@ export function RoomStage({
<span>Показать остальных ({sideTracks.length})</span> <span>Показать остальных ({sideTracks.length})</span>
</button> </button>
)} )}
<RoomAudioRenderer />
</section> </section>
) )
} }

View File

@@ -13,33 +13,14 @@ import {
Video, Video,
VideoOff, VideoOff,
} from 'lucide-react' } from 'lucide-react'
import { Track, type ScreenShareCaptureOptions } from 'livekit-client' import { Track } from 'livekit-client'
import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react' import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
import { useToast } from '@/components/ui/ToastProvider' import { useToast } from '@/components/ui/ToastProvider'
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport' import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
import type { HandQueueEntry } from '@/hooks/useChat' import type { HandQueueEntry } from '@/hooks/useChat'
import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions' import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
import { HandQueueMenu } from '@/components/room/HandQueueMenu' import { HandQueueMenu } from '@/components/room/HandQueueMenu'
import { SCREEN_SHARE_CAPTURE_OPTIONS } from '@/lib/screenShareOptions'
/**
* Опции захвата демонстрации экрана: `audio: true` — звук
* вкладки/экрана там, где браузер его отдаёт (Chrome/Edge — вкладка почти
* всегда, целый экран — только Windows); `selfBrowserSurface: 'exclude'`
* — не предлагать в списке
* источников собственную вкладку (зеркальный туннель самой конференции);
* `surfaceSwitching: 'include'` — разрешить переключать источник прямо во
* время демонстрации, не останавливая её; `systemAudio: 'include'` — не
* запрещать захват системного звука при выборе «весь экран». Вынесено в
* модульную константу — `useTrackToggle` держит `JSON.stringify(captureOptions)`
* в зависимостях внутреннего `useMemo`, инлайновый литерал был бы безвреден,
* но константа явнее фиксирует неизменность опций.
*/
const SCREEN_SHARE_CAPTURE_OPTIONS: ScreenShareCaptureOptions = {
audio: true,
selfBrowserSurface: 'exclude',
surfaceSwitching: 'include',
systemAudio: 'include',
}
interface RoomToolbarProps extends StageViewProps { interface RoomToolbarProps extends StageViewProps {
/** Показывать ли кнопку чата — `JoinOut.chat_enabled` И чат не помечен недоступным (close-код 4404). */ /** Показывать ли кнопку чата — `JoinOut.chat_enabled` И чат не помечен недоступным (close-код 4404). */
@@ -58,6 +39,8 @@ interface RoomToolbarProps extends StageViewProps {
pipSupported: boolean pipSupported: boolean
pipActive: boolean pipActive: boolean
onTogglePiP: () => void onTogglePiP: () => void
/** `JoinOut.hand_queue_enabled` — при `false` кнопка «Рука» и очередь не рендерятся вовсе. */
handQueueEnabled: boolean
/** /**
* Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама * Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама
* решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity` * решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity`
@@ -68,6 +51,16 @@ interface RoomToolbarProps extends StageViewProps {
onLowerHand: () => void onLowerHand: () => void
/** Опустить ЧУЖУЮ руку по identity — только организатору (панель очереди, `HandQueueMenu`). */ /** Опустить ЧУЖУЮ руку по identity — только организатору (панель очереди, `HandQueueMenu`). */
onLowerHandById: (identity: string) => void onLowerHandById: (identity: string) => void
/** Тулбар в оверлее полноэкранного режима — см. докстринг `RoomTopbar.overlayVisible`, тот же механизм. */
overlayVisible?: boolean
/**
* Пользователь нажал «Выйти» — вызывается ПЕРЕД тем, как `DisconnectButton`
* отключит комнату (обработчики в `mergeProps` вызываются цепочкой). Нужен
* `RoomPage`, чтобы отличить намеренный выход от разрыва: причина
* `CLIENT_INITIATED` приходит и от кнопки, и от livekit-client при заморозке
* вкладки — см. докстринг `handleDisconnected`.
*/
onLeave?: () => void
} }
/** /**
@@ -77,16 +70,22 @@ interface RoomToolbarProps extends StageViewProps {
* панели чата, стилизованные по design/mockups/room.html. * панели чата, стилизованные по design/mockups/room.html.
* *
* Кнопка «Вид» (режимы показа и скрытие остальных) рендерится ТОЛЬКО на * Кнопка «Вид» (режимы показа и скрытие остальных) рендерится ТОЛЬКО на
* широком экране — условным рендерингом, а не скрытием через CSS: тулбар на * широком экране — условным рендерингом, а не скрытием через CSS: демонстрация
* мобильном и так ужат до пяти «безусловных» кнопок (демонстрация/ * и мини-плеер скрыты на узком экране через CSS (см. `styles/room.css`), а те
* полноэкранный режим/мини-плеер скрыты на узком экране через CSS, см. * же настройки показа сцены доступны секцией «Вид» в шторке настроек
* `styles/room.css`), а те же настройки там доступны секцией «Вид» в шторке * (`DeviceSettingsDialog`). «Рука» — сознательное исключение из этой
* настроек (`DeviceSettingsDialog`). «Рука» — сознательное исключение из этой
* экономии: поднять руку посреди разговора — действие со временем жизни в * экономии: поднять руку посреди разговора — действие со временем жизни в
* секунды, прятать его в шторку настроек означало бы делать его практически * секунды, прятать его в шторку настроек означало бы делать его практически
* недоступным с телефона. «Очередь» показывается только организатору — * недоступным с телефона. «Очередь» видна ЛЮБОМУ участнику (сессия
* встречается редко, но по той же причине оставлена в тулбаре, а не в * «28-hand-queue-for-all»: раньше только организатору), по той же причине
* шторке: организатору с телефона тоже нужно видеть очередь сразу. * оставлена в тулбаре, а не в шторке: любому участнику с телефона тоже нужно
* видеть очередь сразу. Обе кнопки целиком гасятся `handQueueEnabled`
* (`JoinOut.hand_queue_enabled`, отключаемый модуль в админке).
* Полноэкранный режим на мобильном ОСТАЁТСЯ в тулбаре (не спрятан в шторку,
* как демонстрация/мини-плеер) — по решению оператора вход в него должен
* быть по аналогии с десктопом; если из-за этого кнопки не помещаются в один
* ряд, `mobileButtonCount`/`.tb-wrap-grid` ниже раскладывают их равномерной
* сеткой, а не как получится через `flex-wrap`.
*/ */
export function RoomToolbar({ export function RoomToolbar({
chatVisible, chatVisible,
@@ -100,6 +99,7 @@ export function RoomToolbar({
pipSupported, pipSupported,
pipActive, pipActive,
onTogglePiP, onTogglePiP,
handQueueEnabled,
handQueue, handQueue,
onRaiseHand, onRaiseHand,
onLowerHand, onLowerHand,
@@ -108,11 +108,31 @@ export function RoomToolbar({
onLayoutModeChange, onLayoutModeChange,
hideOthers, hideOthers,
onHideOthersChange, onHideOthersChange,
overlayVisible,
onLeave,
}: RoomToolbarProps) { }: RoomToolbarProps) {
const toast = useToast() const toast = useToast()
const isCompact = useIsCompactViewport() const isCompact = useIsCompactViewport()
const { localParticipant } = useLocalParticipant() const { localParticipant } = useLocalParticipant()
const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity) 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). «Рука»/«Очередь» — обе теперь видны любому участнику
// (сессия «28-hand-queue-for-all»), их наличие зависит только от
// `handQueueEnabled`, не от роли.
const mobileButtonCount =
2 /* микрофон, камера */ +
(handQueueEnabled ? 2 : 0) /* рука, очередь */ +
1 /* настройки */ +
(fullscreenSupported ? 1 : 0) +
(chatVisible ? 1 : 0) +
1 /* выйти */
const mic = useTrackToggle({ source: Track.Source.Microphone }) const mic = useTrackToggle({ source: Track.Source.Microphone })
const camera = useTrackToggle({ source: Track.Source.Camera }) const camera = useTrackToggle({ source: Track.Source.Camera })
const screenShare = useTrackToggle({ const screenShare = useTrackToggle({
@@ -129,7 +149,9 @@ export function RoomToolbar({
}) })
return ( return (
<footer className="room-toolbar"> <footer
className={`room-toolbar${overlayVisible ? ' is-visible' : ''}${mobileButtonCount >= 7 ? ' tb-wrap-grid' : ''}`}
>
<button <button
type="button" type="button"
{...mic.buttonProps} {...mic.buttonProps}
@@ -178,23 +200,25 @@ export function RoomToolbar({
<span className="label">Демонстрация</span> <span className="label">Демонстрация</span>
</button> </button>
<button {handQueueEnabled && (
type="button" <button
className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`} type="button"
aria-pressed={handRaised} className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`}
aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'} aria-pressed={handRaised}
onClick={() => (handRaised ? onLowerHand() : onRaiseHand())} aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'}
> onClick={() => (handRaised ? onLowerHand() : onRaiseHand())}
<span className="icon-shell"> >
<Hand className="lucide" aria-hidden="true" /> <span className="icon-shell">
{handQueue.length > 0 && ( <Hand className="lucide" aria-hidden="true" />
<span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span> {handQueue.length > 0 && (
)} <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
</span> )}
<span className="label">Рука</span> </span>
</button> <span className="label">Рука</span>
</button>
)}
<HandQueueMenu queue={handQueue} onLower={onLowerHandById} /> {handQueueEnabled && <HandQueueMenu queue={handQueue} onLower={onLowerHandById} />}
{!isCompact && ( {!isCompact && (
<StageViewMenu <StageViewMenu
@@ -214,7 +238,10 @@ export function RoomToolbar({
<span className="icon-shell"> <span className="icon-shell">
<Settings className="lucide" aria-hidden="true" /> <Settings className="lucide" aria-hidden="true" />
</span> </span>
<span className="label">Устройства</span> {/* На мобильном подпись шире по смыслу («Настройки»): там же в шторке
секция «Вид», а отдельной кнопки под неё в тулбаре нет. На десктопе
панель — только настройки устройств, подпись это отражает. */}
<span className="label">{isCompact ? 'Настройки' : 'Устройства'}</span>
</button> </button>
{fullscreenSupported && ( {fullscreenSupported && (
@@ -276,7 +303,7 @@ export function RoomToolbar({
</button> </button>
)} )}
<DisconnectButton className="tb-btn danger" aria-label="Выйти из конференции"> <DisconnectButton className="tb-btn danger" aria-label="Выйти из конференции" onClick={onLeave}>
<span className="icon-shell"> <span className="icon-shell">
<LogOut className="lucide" aria-hidden="true" /> <LogOut className="lucide" aria-hidden="true" />
</span> </span>

View File

@@ -15,6 +15,12 @@ interface RoomTopbarProps {
/** Slug/номер конференции из адреса — для инвайт-чипа (копирование ссылки). */ /** Slug/номер конференции из адреса — для инвайт-чипа (копирование ссылки). */
slug?: string slug?: string
number?: string number?: string
/**
* Полноэкранный режим (`RoomPage.tsx`) прячет топбар в оверлей и показывает
* его только по этому флагу — вне полноэкранного режима не влияет ни на что
* (CSS-правило само по себе действует лишь под `.room-fullscreen-overlay`).
*/
overlayVisible?: boolean
} }
/** /**
@@ -26,7 +32,7 @@ interface RoomTopbarProps {
* тёмных токенов темы `room` (см. `--color-room-tile*`), без новых * тёмных токенов темы `room` (см. `--color-room-tile*`), без новых
* цветов и форм. * цветов и форм.
*/ */
export function RoomTopbar({ title, slug, number }: RoomTopbarProps) { export function RoomTopbar({ title, slug, number, overlayVisible }: RoomTopbarProps) {
const participants = useParticipants() const participants = useParticipants()
const [copied, setCopied] = useState(false) const [copied, setCopied] = useState(false)
@@ -44,7 +50,7 @@ export function RoomTopbar({ title, slug, number }: RoomTopbarProps) {
} }
return ( return (
<header className="room-topbar"> <header className={`room-topbar${overlayVisible ? ' is-visible' : ''}`}>
<div className="room-title-block"> <div className="room-title-block">
<h1>{title ?? 'Конференция без названия'}</h1> <h1>{title ?? 'Конференция без названия'}</h1>
<p> <p>

View File

@@ -62,8 +62,10 @@ export interface PickStageFocusInput {
/** Ключ, что был в фокусе на предыдущем рендере; `null` — фокус ещё не выбирался. */ /** Ключ, что был в фокусе на предыдущем рендере; `null` — фокус ещё не выбирался. */
prevFocusKey: string | null prevFocusKey: string | null
/** /**
* Ключ трека, ЗАКРЕПЛЁННОГО пользователем в основном окне (кнопка-булавка на * Ключ трека, ЗАКРЕПЛЁННОГО пользователем (кнопка-булавка на плитке
* плитке, состояние живёт в `RoomStage.tsx`); `null` — закрепления нет. * основного окна; состояние живёт в `RoomStage.tsx` и переезжает в
* мини-плеер через `RoomPage`, см. там `initialPinnedKey`); `null` —
* закрепления нет.
* Закрепление держит фокус вопреки говорящим, но уступает ЛЮБОЙ активной * Закрепление держит фокус вопреки говорящим, но уступает ЛЮБОЙ активной
* демонстрации экрана (формулировка оператора: «перебивается только чьей-либо * демонстрации экрана (формулировка оператора: «перебивается только чьей-либо
* демонстрацией экрана») — а когда демонстрация закончилась, фокус * демонстрацией экрана») — а когда демонстрация закончилась, фокус
@@ -79,19 +81,22 @@ export interface PickStageFocusInput {
* не удерживать текущий). С 0.0.6 включено и для мини-плеера (PiP), и для * не удерживать текущий). С 0.0.6 включено и для мини-плеера (PiP), и для
* основного окна — решение оператора (этап 3, задача 3.2). Защита от * основного окна — решение оператора (этап 3, задача 3.2). Защита от
* дребезга — на стороне вызывающего: источник «говорящих» — throttled * дребезга — на стороне вызывающего: источник «говорящих» — throttled
* `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged`, а в * `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged` плюс
* основном окне ещё и удержание в ~1.2 с (см. `useSteadySpeakers` в * удержание в ~1.2 с (см. `useSteadySpeakers` в `RoomStage.tsx`, с 0.0.25 —
* `RoomStage.tsx`), не сырой дребезжащий `participant.isSpeaking`. * в обеих сценах), не сырой дребезжащий `participant.isSpeaking`.
* По умолчанию `false` — фокус удерживается (см. правило 5). * По умолчанию `false` — фокус удерживается (см. правило 5).
*/ */
followSpeaker?: boolean followSpeaker?: boolean
/** /**
* Живая демонстрация экрана в фокусе НЕ уступает заговорившему участнику * Живая демонстрация экрана в фокусе НЕ уступает заговорившему участнику
* (правило 3). Нужно основному окну: там демонстрация — это содержательный * (правило 3). Демонстрация — это содержательный центр разговора, и уводить
* центр разговора, и уводить её из большого окна на каждую реплику нельзя. * её из фокуса на каждую реплику нельзя.
* Мини-плеер (PiP) показывает ровно одну плитку и намеренно ведёт себя иначе *
* — всегда показывает того, кто говорит, поэтому там `false` (поведение * С 0.0.25 включено в ОБЕИХ сценах. До этого мини-плеер (PiP) намеренно
* PiP не менялось с 0.0.4). * ходил с `false` — «одна плитка, всегда показываем говорящего»; на практике
* это выглядело как поломка: демонстрация в мини-окне пропадала, стоило
* кому-то сказать слово. По умолчанию всё ещё `false` — это поведение
* функции без явного запроса удержания.
*/ */
holdScreenShare?: boolean holdScreenShare?: boolean
/** /**
@@ -132,16 +137,14 @@ function pickSpeakerKey(
* фокус безусловно переходит на него (последний из новых, если появилось * фокус безусловно переходит на него (последний из новых, если появилось
* сразу несколько), даже если до этого в фокусе была камера или другая * сразу несколько), даже если до этого в фокусе была камера или другая
* демонстрация. Так же ведут себя типовые UI конференций (Google Meet). * демонстрация. Так же ведут себя типовые UI конференций (Google Meet).
* 2. Закрепление (`pinnedKey`, только основное окно): закреплённый участник * 2. Закрепление (`pinnedKey`): закреплённый участник
* забирает фокус у говорящих и у удержания предыдущего фокуса, но уступает * забирает фокус у говорящих и у удержания предыдущего фокуса, но уступает
* ЛЮБОЙ активной демонстрации экрана. Поэтому правило и стоит выше * ЛЮБОЙ активной демонстрации экрана. Поэтому правило и стоит выше
* удержания (правило 5): как только демонстрация закончилась и * удержания (правило 5): как только демонстрация закончилась и
* `screenShareKeys` опустел, фокус возвращается на закреплённого, а не * `screenShareKeys` опустел, фокус возвращается на закреплённого, а не
* остаётся на том, кто был в фокусе до демонстрации. * остаётся на том, кто был в фокусе до демонстрации.
* 3. `holdScreenShare` (только основное окно): демонстрация, уже стоящая в * 3. `holdScreenShare`: демонстрация, уже стоящая в фокусе, не уступает
* фокусе, не уступает заговорившему — иначе большое окно уводило бы шэр на * заговорившему — иначе окно уводило бы шэр на каждую реплику.
* каждую реплику. В PiP шаг пропускается (там одна плитка и она всегда
* показывает говорящего).
* 4. `followSpeaker`: если сейчас есть говорящий — фокус СРАЗУ переходит на * 4. `followSpeaker`: если сейчас есть говорящий — фокус СРАЗУ переходит на
* него, даже если текущий фокус ещё жив; среди одновременно говорящих * него, даже если текущий фокус ещё жив; среди одновременно говорящих
* предпочитаем того, у кого включена камера (`cameraKeysWithVideo`). * предпочитаем того, у кого включена камера (`cameraKeysWithVideo`).

View File

@@ -0,0 +1,29 @@
import type { ScreenShareCaptureOptions } from 'livekit-client'
/**
* Опции захвата демонстрации экрана: `audio: true` — звук
* вкладки/экрана там, где браузер его отдаёт (Chrome/Edge — вкладка почти
* всегда, целый экран — только Windows); `selfBrowserSurface: 'exclude'`
* — не предлагать в списке
* источников собственную вкладку (зеркальный туннель самой конференции);
* `surfaceSwitching: 'include'` — разрешить переключать источник прямо во
* время демонстрации, не останавливая её; `systemAudio: 'include'` — не
* запрещать захват системного звука при выборе «весь экран».
*
* Вынесено в модульную константу — `useTrackToggle` держит
* `JSON.stringify(captureOptions)` в зависимостях внутреннего `useMemo`,
* инлайновый литерал был бы безвреден, но константа явнее фиксирует
* неизменность опций.
*
* Живёт в `lib/`, а не рядом с тулбаром, потому что кнопок демонстрации теперь
* ДВЕ: в основном тулбаре (`RoomToolbar`) и в мини-окне (`RoomStage`,
* `PipScreenShareToggle`). Опции у них обязаны совпадать: обе кнопки управляют
* одной и той же публикацией, и разойдись они хотя бы в `audio`, демонстрация
* получалась бы разной в зависимости от того, откуда её запустили.
*/
export const SCREEN_SHARE_CAPTURE_OPTIONS: ScreenShareCaptureOptions = {
audio: true,
selfBrowserSurface: 'exclude',
surfaceSwitching: 'include',
systemAudio: 'include',
}

View File

@@ -146,6 +146,7 @@ export function JoinPage() {
title: resolved.title, title: resolved.title,
conferenceId: data.conference_id, conferenceId: data.conference_id,
chatEnabled: data.chat_enabled, chatEnabled: data.chat_enabled,
handQueueEnabled: data.hand_queue_enabled,
publishQualityCap: data.publish_quality_cap, publishQualityCap: data.publish_quality_cap,
stageMaxTiles: data.stage_max_tiles, stageMaxTiles: data.stage_max_tiles,
}, },

View File

@@ -43,6 +43,7 @@ export function LobbyPage() {
title: conference.title, title: conference.title,
conferenceId: conference.join.conference_id, conferenceId: conference.join.conference_id,
chatEnabled: conference.join.chat_enabled, chatEnabled: conference.join.chat_enabled,
handQueueEnabled: conference.join.hand_queue_enabled,
publishQualityCap: conference.join.publish_quality_cap, publishQualityCap: conference.join.publish_quality_cap,
stageMaxTiles: conference.join.stage_max_tiles, stageMaxTiles: conference.join.stage_max_tiles,
number: conference.number, number: conference.number,

View File

@@ -2,8 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
import { useLocation, useNavigate, useParams } from 'react-router-dom' import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { PictureInPicture2 } from 'lucide-react' import { PictureInPicture2 } from 'lucide-react'
import { LiveKitRoom, usePersistentUserChoices } from '@livekit/components-react' import { LiveKitRoom, RoomAudioRenderer, usePersistentUserChoices } from '@livekit/components-react'
import type { RoomOptions } from 'livekit-client' import { DisconnectReason, type RoomOptions } from 'livekit-client'
import '@livekit/components-styles' import '@livekit/components-styles'
import '@/styles/room.css' import '@/styles/room.css'
import { joinConference, resolveConference, type PublishQualityCap } from '@/api/conferences' import { joinConference, resolveConference, type PublishQualityCap } from '@/api/conferences'
@@ -22,6 +22,29 @@ import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
import { buildPublishDefaults } from '@/lib/publishQualityCap' import { buildPublishDefaults } from '@/lib/publishQualityCap'
import { loadStageLayoutMode, saveStageLayoutMode, type StageLayoutMode } from '@/lib/stageLayoutMode' import { loadStageLayoutMode, saveStageLayoutMode, type StageLayoutMode } from '@/lib/stageLayoutMode'
/** Сколько мс держать топбар/тулбар видимыми в полноэкранном режиме без взаимодействия, прежде чем спрятать их снова. */
const FULLSCREEN_CONTROLS_AUTO_HIDE_MS = 4000
/** Полоса у нижнего края экрана (px) — наведение мыши в неё в полноэкранном режиме на десктопе показывает тулбар без клика. */
const FULLSCREEN_FOOTER_HOVER_ZONE_PX = 72
/**
* Сколько раз подряд страница возвращается в конференцию сама после разрыва,
* которого пользователь не просил. Ограничение — защита от бесконечного цикла
* «вошёл → сразу выбросило»: например, если конференция кончилась ровно в
* момент разрыва или сервер по какой-то причине не принимает участника.
* Исчерпав бюджет, страница ведёт себя как раньше — уводит в лобби.
*/
const AUTO_REJOIN_LIMIT = 5
/**
* Соединение, прожившее дольше этого времени, считается состоявшимся: бюджет
* авто-перезаходов обнуляется. Без этого редкие разрывы за длинную встречу
* (телефон засыпал пять раз за час) постепенно съели бы лимит и шестое
* пробуждение выбросило бы участника в лобби.
*/
const AUTO_REJOIN_BUDGET_RESET_MS = 30_000
interface RoomJoinState { interface RoomJoinState {
livekitUrl: string livekitUrl: string
token: string token: string
@@ -32,6 +55,8 @@ interface RoomJoinState {
number?: string number?: string
/** `JoinOut.chat_enabled` — при `false` кнопка чата и панель не рендерятся. */ /** `JoinOut.chat_enabled` — при `false` кнопка чата и панель не рендерятся. */
chatEnabled?: boolean chatEnabled?: boolean
/** `JoinOut.hand_queue_enabled` — при `false` кнопка «Рука» и очередь не рендерятся. */
handQueueEnabled?: boolean
/** /**
* Рычаги нагрузки медиа (`JoinOut.publish_quality_cap`/`stage_max_tiles`, * Рычаги нагрузки медиа (`JoinOut.publish_quality_cap`/`stage_max_tiles`,
* `instance_settings.media_limits`) — приезжают вместе с токеном, ДО * `instance_settings.media_limits`) — приезжают вместе с токеном, ДО
@@ -72,13 +97,88 @@ export function RoomPage() {
const [joinState, setJoinState] = useState<RoomJoinState | null>(initialState) const [joinState, setJoinState] = useState<RoomJoinState | null>(initialState)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
// Пользователь нажал «Выйти» — ЕДИНСТВЕННЫЙ признак, по которому уход со
// страницы считается намеренным. Отдельный флаг нужен потому, что причина
// `CLIENT_INITIATED` приходит не только от кнопки: livekit-client вешает
// обработчик на событие `freeze` (Page Lifecycle) и при заморозке вкладки
// сам зовёт `room.disconnect()` — с той же самой причиной. Android Chrome
// фоновую вкладку замораживает, так что без этого флага заснувший телефон
// выглядел бы ровно как «пользователь вышел» и уезжал бы в лобби.
const leaveRequestedRef = useRef(false)
// Когда установилось текущее соединение — чтобы отличить «разрыв после
// нормальной работы» от «выбрасывает сразу после входа» (см. AUTO_REJOIN_*).
const connectedAtRef = useRef(0)
const autoRejoinCountRef = useRef(0)
const handleLeaveClick = useCallback(() => {
leaveRequestedRef.current = true
}, [])
const handleConnected = useCallback(() => {
connectedAtRef.current = Date.now()
// Мы снова в комнате — намерение выйти, если оно откуда-то осталось
// невыполненным, к этому соединению уже не относится.
leaveRequestedRef.current = false
}, [])
// useCallback: стабильная ссылка на обработчик — иначе на каждом рендере // useCallback: стабильная ссылка на обработчик — иначе на каждом рендере
// RoomPage пересобирался бы объект-пропс `onDisconnected`, а с ним и // RoomPage пересобирался бы объект-пропс `onDisconnected`, а с ним и
// внутренний useEffect @livekit/components-react (он в списке зависимостей // внутренний useEffect @livekit/components-react (он в списке зависимостей
// хука useLiveKitRoom), лишний раз пересоздавая подписки на события Room. // хука useLiveKitRoom), лишний раз пересоздавая подписки на события Room.
const handleDisconnected = useCallback(() => { //
navigate(status === 'authenticated' ? '/lobby' : '/join') // Разрыв ≠ выход. До 0.0.27 любое отключение уводило со страницы, и на
}, [navigate, status]) // мобильном это ломало обычный сценарий: экран телефона гаснет, Chrome
// срезает фоновой вкладке ресурсы, ICE перестаёт отвечать — и LiveKit
// закрывает участника через 5 с после потери соединения
// (`PEER_CONNECTION_DISCONNECTED`, замерено на проде: 37 с после блокировки
// экрана, 23 с после сворачивания браузера). Восстановить сессию после
// этого нельзя — участника на сервере уже нет (`could not restart
// participant`), нужен полный повторный вход. livekit-client такой вход
// пытается сделать сам, но его бюджет повторов (10 попыток, ~44 с) в
// фоновой вкладке успевает сгореть — и тогда приходит `Disconnected`,
// после которого пользователь оказывался в лобби вместо конференции.
//
// Теперь непреднамеренный разрыв просто сбрасывает `joinState`, а дальше
// работает уже написанный путь авто-перезахода (эффект ниже): страница
// молча резолвит конференцию, берёт свежий токен и входит заново. Никакого
// второго механизма восстановления не появляется.
const handleDisconnected = useCallback(
(reason?: DisconnectReason) => {
const leaveForGood = () => navigate(status === 'authenticated' ? '/lobby' : '/join')
if (leaveRequestedRef.current) {
leaveForGood()
return
}
// Разрывы, после которых возвращаться некуда или нельзя: участника
// выгнал организатор, конференцию закрыли, либо этой же личностью вошли
// с другого устройства (перезаход устроил бы пинг-понг между ними).
if (
reason === DisconnectReason.PARTICIPANT_REMOVED ||
reason === DisconnectReason.ROOM_DELETED ||
reason === DisconnectReason.ROOM_CLOSED ||
reason === DisconnectReason.DUPLICATE_IDENTITY
) {
leaveForGood()
return
}
const sessionMs = connectedAtRef.current ? Date.now() - connectedAtRef.current : 0
if (sessionMs > AUTO_REJOIN_BUDGET_RESET_MS) {
autoRejoinCountRef.current = 0
}
if (autoRejoinCountRef.current >= AUTO_REJOIN_LIMIT) {
leaveForGood()
return
}
autoRejoinCountRef.current += 1
connectedAtRef.current = 0
setJoinState(null)
},
[navigate, status],
)
useEffect(() => { useEffect(() => {
if (joinState || !slug) return if (joinState || !slug) return
@@ -110,6 +210,7 @@ export function RoomPage() {
title: info.title, title: info.title,
conferenceId: result.conference_id, conferenceId: result.conference_id,
chatEnabled: result.chat_enabled, chatEnabled: result.chat_enabled,
handQueueEnabled: result.hand_queue_enabled,
publishQualityCap: result.publish_quality_cap, publishQualityCap: result.publish_quality_cap,
stageMaxTiles: result.stage_max_tiles, stageMaxTiles: result.stage_max_tiles,
}) })
@@ -162,10 +263,16 @@ export function RoomPage() {
const chatVisible = Boolean(joinState?.chatEnabled) && !chat.unavailable const chatVisible = Boolean(joinState?.chatEnabled) && !chat.unavailable
// Identity участников с поднятой рукой — множеством, для дешёвого `.has()` // Identity участников с поднятой рукой — множеством, для дешёвого `.has()`
// на каждой плитке сцены (см. `RoomParticipantTile`). // на каждой плитке сцены (см. `RoomParticipantTile`). Выключенный модуль
// (`handQueueEnabled=false`) гасит и эти значки — иначе на плитке мог бы
// повиснуть индикатор от руки, поднятой до отключения модуля (сервер
// хранит очередь в Redis независимо от тоггла, см. `services/hand_queue.py`).
const raisedHandIdentities = useMemo( 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-элемента // Корневой контейнер комнаты — цель для fullscreen и источник video-элемента
@@ -175,6 +282,73 @@ export function RoomPage() {
const pip = useRoomPiP(roomRootRef) const pip = useRoomPiP(roomRootRef)
const [settingsOpen, setSettingsOpen] = useState(false) const [settingsOpen, setSettingsOpen] = useState(false)
// Топбар и тулбар в полноэкранном режиме — оверлей поверх сцены (см.
// `.room-fullscreen-overlay` в room.css), а не часть потока: показываются
// по тапу/клику по сцене вне элементов управления и прячутся сами через
// FULLSCREEN_CONTROLS_AUTO_HIDE_MS бездействия. На десктопе есть ещё второй
// способ показать их — навести мышь в нижнюю полосу экрана (без клика),
// как в большинстве видеоплееров; клик остаётся основным способом на
// тач-устройствах, где наведения не бывает. Обычный (не полноэкранный)
// режим этот стейт не использует вовсе.
const [fullscreenControlsVisible, setFullscreenControlsVisible] = useState(true)
// Счётчик «попроси показать и отсчитать заново» — растёт на каждый клик/
// наведение, даже если панель УЖЕ видима (иначе непрерывное наведение не
// продлевало бы таймер: setState(true) поверх уже true не меняет состояние
// и не перезапускает эффект ниже).
const [fullscreenControlsTick, setFullscreenControlsTick] = useState(0)
// Показ при входе в полноэкранный режим — «подгонка состояния во время
// рендера» (см. тот же приём у `chatSeenCount` выше), а не setState в теле
// эффекта (react-hooks/set-state-in-effect): само планирование таймера
// авто-скрытия — ниже, отдельным эффектом, и не вызывает setState
// синхронно в своём теле.
const [prevFullscreenActive, setPrevFullscreenActive] = useState(fullscreen.active)
if (fullscreen.active !== prevFullscreenActive) {
setPrevFullscreenActive(fullscreen.active)
if (fullscreen.active) {
setFullscreenControlsVisible(true)
setFullscreenControlsTick((tick) => tick + 1)
}
}
useEffect(() => {
if (!fullscreen.active || !fullscreenControlsVisible) return
const timer = setTimeout(() => setFullscreenControlsVisible(false), FULLSCREEN_CONTROLS_AUTO_HIDE_MS)
return () => clearTimeout(timer)
}, [fullscreen.active, fullscreenControlsVisible, fullscreenControlsTick])
// Наведение мыши в нижнюю полосу экрана — только десктопный способ показать
// элементы управления без клика; на тач-устройствах `mousemove` в таком виде
// не приходит, слушатель им не вредит и не мешает.
useEffect(() => {
if (!fullscreen.active) return
function handleMouseMove(e: MouseEvent) {
if (window.innerHeight - e.clientY <= FULLSCREEN_FOOTER_HOVER_ZONE_PX) {
setFullscreenControlsVisible(true)
setFullscreenControlsTick((tick) => tick + 1)
}
}
window.addEventListener('mousemove', handleMouseMove)
return () => window.removeEventListener('mousemove', handleMouseMove)
}, [fullscreen.active])
// Клик/тап по сцене переключает видимость — но не по элементам управления
// внутри неё (кнопки плиток, булавка закрепления, «Показать остальных» и
// т.п.: `closest` поднимается от места клика и гасит переключение, если
// по дороге встретился интерактивный элемент) и не по открытой панели чата
// (`.chat-panel` — та рендерится внутри того же `.room-main`, но клики по
// тексту сообщений не должны прятать/показывать тулбар).
const handleStageAreaClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
if (!fullscreen.active) return
const target = e.target as HTMLElement
if (target.closest('button, a, input, select, textarea, [role="dialog"], .chat-panel')) return
setFullscreenControlsVisible((visible) => !visible)
setFullscreenControlsTick((tick) => tick + 1)
},
[fullscreen.active],
)
// Вид сцены живёт здесь, а не в `RoomStage`: переключатели — в тулбаре и в // Вид сцены живёт здесь, а не в `RoomStage`: переключатели — в тулбаре и в
// шторке настроек, а сцена их только читает (общий предок). // шторке настроек, а сцена их только читает (общий предок).
// //
@@ -208,6 +382,12 @@ export function RoomPage() {
// открывал мини-окно на самом пользователе. Подробнее — докстринг `RoomStage`. // открывал мини-окно на самом пользователе. Подробнее — докстринг `RoomStage`.
const [stageFocusKey, setStageFocusKey] = useState<string | null>(null) const [stageFocusKey, setStageFocusKey] = useState<string | null>(null)
// Закрепление участника (булавка на плитке) — по той же причине и тем же
// мостиком, что и `stageFocusKey`: экземпляр `RoomStage` при открытии
// мини-плеера пересоздаётся, и до 0.0.25 закрепление, сделанное в основном
// окне, в мини-окно не попадало вовсе (там был свой чистый `useState`).
const [stagePinnedKey, setStagePinnedKey] = useState<string | null>(null)
// Сохранённый выбор устройств — читаем через собственный вызов // Сохранённый выбор устройств — читаем через собственный вызов
// usePersistentUserChoices (независимый от того, что использует // usePersistentUserChoices (независимый от того, что использует
// DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО: // DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
@@ -275,7 +455,7 @@ export function RoomPage() {
} }
return ( return (
<div data-theme="room" ref={roomRootRef}> <div data-theme="room" ref={roomRootRef} className={fullscreen.active ? 'room-fullscreen-overlay' : undefined}>
<LiveKitRoom <LiveKitRoom
serverUrl={joinState.livekitUrl} serverUrl={joinState.livekitUrl}
token={joinState.token} token={joinState.token}
@@ -283,11 +463,32 @@ export function RoomPage() {
audio={false} audio={false}
video={false} video={false}
options={roomOptions} options={roomOptions}
onConnected={handleConnected}
onDisconnected={handleDisconnected} onDisconnected={handleDisconnected}
> >
{/* Звук комнаты рендерится ЗДЕСЬ, а не внутри `RoomStage`, и ровно
одним экземпляром на всю страницу. `RoomAudioRenderer` — это набор
скрытых `<audio>`, к которым LiveKit привязывает чужие аудиотреки
(`track.attach(el)`). Пока он жил в сцене, открытие мини-плеера
переносило эти элементы в ДРУГОЙ документ (Document PiP — отдельное
окно со своим `document`), а возврат — обратно, и после возврата
звук чужих участников пропадал: Chrome теряет аудиовыход у
remote-трека, переехавшего между документами. Замерено: пакеты
продолжают приходить (`packetsReceived` растёт), а
`totalSamplesDuration`/`totalAudioEnergy` замирают, и трек молчит
даже в свежесозданном `<audio>` со свежим `MediaStream`. Тот же
цикл detach/attach В ПРЕДЕЛАХ ОДНОГО документа безвреден — дело
именно в переезде. Здесь элементы живут в основном документе
непрерывно, весь цикл «открыл мини-окно → вернул» их не касается. */}
<RoomAudioRenderer />
<div data-lk-theme="default" className="room-shell"> <div data-lk-theme="default" className="room-shell">
<RoomTopbar title={joinState.title ?? null} slug={slug} number={joinState.number} /> <RoomTopbar
<div className="room-main"> title={joinState.title ?? null}
slug={slug}
number={joinState.number}
overlayVisible={fullscreenControlsVisible}
/>
<div className="room-main" onClick={handleStageAreaClick}>
{pip.mode === 'document' ? ( {pip.mode === 'document' ? (
// Сцена сейчас рисуется в PiP-окне (через createPortal ниже) — // Сцена сейчас рисуется в PiP-окне (через createPortal ниже) —
// основное окно вместо неё показывает заглушку с возвратом. // основное окно вместо неё показывает заглушку с возвратом.
@@ -306,6 +507,8 @@ export function RoomPage() {
onHideOthers={() => setHideOthers(true)} onHideOthers={() => setHideOthers(true)}
initialFocusKey={stageFocusKey} initialFocusKey={stageFocusKey}
onFocusKeyChange={setStageFocusKey} onFocusKeyChange={setStageFocusKey}
initialPinnedKey={stagePinnedKey}
onPinnedKeyChange={setStagePinnedKey}
onPinFocus={handlePinFocus} onPinFocus={handlePinFocus}
raisedHandIdentities={raisedHandIdentities} raisedHandIdentities={raisedHandIdentities}
conferenceId={joinState.conferenceId} conferenceId={joinState.conferenceId}
@@ -334,6 +537,7 @@ export function RoomPage() {
pipSupported={pip.supported} pipSupported={pip.supported}
pipActive={pip.active} pipActive={pip.active}
onTogglePiP={pip.toggle} onTogglePiP={pip.toggle}
handQueueEnabled={Boolean(joinState.handQueueEnabled)}
handQueue={chat.handQueue} handQueue={chat.handQueue}
onRaiseHand={chat.raiseHand} onRaiseHand={chat.raiseHand}
onLowerHand={() => chat.lowerHand()} onLowerHand={() => chat.lowerHand()}
@@ -342,6 +546,8 @@ export function RoomPage() {
onLayoutModeChange={handleLayoutModeChange} onLayoutModeChange={handleLayoutModeChange}
hideOthers={hideOthers} hideOthers={hideOthers}
onHideOthersChange={setHideOthers} onHideOthersChange={setHideOthers}
overlayVisible={fullscreenControlsVisible}
onLeave={handleLeaveClick}
/> />
</div> </div>
{settingsOpen && ( {settingsOpen && (
@@ -358,10 +564,17 @@ export function RoomPage() {
`variant="pip"` — мини-плеер `variant="pip"` — мини-плеер
показывает только активное окно (одну плитку), без карусели/грида показывает только активное окно (одну плитку), без карусели/грида
основного окна. `initialFocusKey` — то, что было крупно в основном основного окна. `initialFocusKey` — то, что было крупно в основном
окне: без него мини-окно открывалось на самом пользователе. */} окне: без него мини-окно открывалось на самом пользователе;
`initialPinnedKey` — закрепление оттуда же. */}
{pip.pipWindow && {pip.pipWindow &&
createPortal( createPortal(
<RoomStage variant="pip" initialFocusKey={stageFocusKey} onFocusKeyChange={setStageFocusKey} />, <RoomStage
variant="pip"
initialFocusKey={stageFocusKey}
onFocusKeyChange={setStageFocusKey}
initialPinnedKey={stagePinnedKey}
onPinnedKeyChange={setStagePinnedKey}
/>,
pip.pipWindow.document.body, pip.pipWindow.document.body,
)} )}
<ForcedMuteWatcher event={chat.lastForcedMute} /> <ForcedMuteWatcher event={chat.lastForcedMute} />

View File

@@ -133,18 +133,40 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
* `.stage-tiles` в основном окне) плюс подстраховочный `min-height`, чтобы * `.stage-tiles` в основном окне) плюс подстраховочный `min-height`, чтобы
* плитка не схлопывалась, если видео ещё не выдало реальные размеры. * плитка не схлопывалась, если видео ещё не выдало реальные размеры.
*/ */
.room-single-tile { position: relative; flex: 1; min-height: 0; display: flex; } .room-single-tile {
position: relative;
flex: 1;
min-height: 0;
display: flex;
/* Ширина ряда кнопок мини-плеера (`.room-pip-controls`): две круглые кнопки
по 36px плюс зазор. Живёт на общем предке, а не на самом ряду, потому что
от неё считается и отступ плашки с именем участника — иначе подпись
(«Второй участник — демонстрация экрана») уезжает ПОД кнопки. Появится
третья кнопка — правится одно число, а не два места. */
--room-pip-controls-width: calc(2 * 36px + 0.375rem);
}
.room-single-tile .lk-participant-tile { flex: 1; min-height: 220px; width: 100%; } .room-single-tile .lk-participant-tile { flex: 1; min-height: 220px; width: 100%; }
/* Библиотечная плашка с именем прижата к обоим нижним углам (`left: 4px;
right: 4px`) и потому начинается ровно там, где лежат наши кнопки. Сдвигаем
её содержимое вправо на ширину ряда — сама плашка прозрачная, подпись внутри
со своим фоном, так что двигать надо именно отступ, а не `left`. */
.room-single-tile .lk-participant-metadata { padding-left: var(--room-pip-controls-width); }
/* Кнопка микрофона мини-плеера (задача A5) — своего тулбара в PiP нет, /* Кнопки мини-плеера (микрофон — задача A5, демонстрация экрана — 0.0.29):
кнопка лежит поверх единственной плитки левым нижним углом (правый занят своего тулбара в PiP нет, кнопки лежат поверх единственной плитки левым
штатным `.lk-focus-toggle-button`/нашей булавкой закрепления — тут её нет, нижним углом (правый занят штатным `.lk-focus-toggle-button`/нашей булавкой
в PiP закреплять нечего, но геометрия зеркалит `.room-pin-toggle`). */ закрепления — тут её нет, в PiP закреплять нечего, но геометрия зеркалит
.room-pip-mic-toggle { `.room-pin-toggle`). Ряд, а не две абсолютно спозиционированные кнопки:
так добавление третьей не потребует пересчёта координат. */
.room-pip-controls {
position: absolute; position: absolute;
left: 0.5rem; left: 0.5rem;
bottom: 0.5rem; bottom: 0.5rem;
z-index: 5; z-index: 5;
display: flex;
gap: 0.375rem;
}
.room-pip-btn {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
@@ -152,12 +174,16 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--color-room-mic-on);
color: #10331f;
cursor: pointer; cursor: pointer;
} }
.room-pip-mic-toggle svg { width: 18px; height: 18px; } .room-pip-btn svg { width: 18px; height: 18px; }
.room-pip-mic-toggle { background: var(--color-room-mic-on); color: #10331f; }
.room-pip-mic-toggle.is-off { background: var(--color-room-danger-bg); color: #fff; } .room-pip-mic-toggle.is-off { background: var(--color-room-danger-bg); color: #fff; }
/* Демонстрация — «выключено» это нейтральное состояние (не тревога, в отличие
от снятого микрофона), поэтому неактивная кнопка тёмная под цвет плитки, а
активная подсвечена тем же зелёным, что включённый микрофон. */
.room-pip-share-toggle { background: var(--color-room-tile-hover); color: var(--color-room-text-primary); }
.room-pip-share-toggle.is-on { background: var(--color-room-mic-on); color: #10331f; }
/* /*
* ---------- Колонка миниатюр (кнопка «Скрыть» + карусель) ---------- * ---------- Колонка миниатюр (кнопка «Скрыть» + карусель) ----------
@@ -803,10 +829,16 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
* Тот же диалог (`DeviceSettingsDialog`), что модалка выше, — только контейнер * Тот же диалог (`DeviceSettingsDialog`), что модалка выше, — только контейнер
* снизу вместо центра экрана: `.room-sheet-overlay`/`.room-sheet-panel` вместо * снизу вместо центра экрана: `.room-sheet-overlay`/`.room-sheet-panel` вместо
* `.room-modal-overlay`/`.room-modal-panel`, разметка полей (`.room-field` и * `.room-modal-overlay`/`.room-modal-panel`, разметка полей (`.room-field` и
* ниже) общая. Ручка `.room-sheet-handle` — свайп вниз для закрытия (JS считает * ниже) общая. Свайп вниз для закрытия JS на самой панели (не на ручке —
* смещение пальца и сам решает, закрывать или вернуть панель на место; * см. докстринг `DeviceSettingsDialog`) считает смещение пальца и сам решает,
* `transition` тут — только пружина возврата, во время самого драга * закрывать или вернуть панель на место; `transition` тут — только пружина
* компонент подставляет инлайновый `transition: none`). * возврата, во время самого драга компонент подставляет инлайновый
* `transition: none`. `overscroll-behavior-y: contain` — чтобы при свайпе
* вниз от самого верха списка устройств iOS/Chrome не показывали заодно
* ещё и нативный эффект растяжения скролла поверх нашей анимации панели.
* Ручка `.room-sheet-handle` — теперь чисто визуальная подсказка (сама
* панель ловит жест где угодно), `touch-action: none` на ней оставлен —
* безвредно и снимает системные жесты с этой узкой полоски.
*/ */
.room-sheet-overlay { .room-sheet-overlay {
position: fixed; position: fixed;
@@ -827,6 +859,7 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
width: 100%; width: 100%;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
overscroll-behavior-y: contain;
transition: transform 160ms ease-out; transition: transform 160ms ease-out;
} }
.room-sheet-handle { .room-sheet-handle {
@@ -1081,22 +1114,79 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
в самой конференции, а вот чип «№ … / Пригласить» с телефона нужен чаще в самой конференции, а вот чип «№ … / Пригласить» с телефона нужен чаще
(скопировать ссылку и позвать участника), поэтому он остаётся. (скопировать ссылку и позвать участника), поэтому он остаётся.
Тулбар: демонстрация экрана, полноэкранный режим и мини-окно с телефона Тулбар: демонстрация экрана и мини-окно с телефона практически не нужны —
практически не нужны, а все 8 кнопок в ширину экрана физически не скрыты. Полноэкранный режим ОСТАЁТСЯ виден, как на десктопе (решение
помещаются — скрываем их и уплотняем оставшиеся пять оператора 03.08: вход в него — по аналогии с десктопным приложением, не
(микрофон/камера/устройства/чат/выход). `flex-wrap` + `min-width: 0` — спрятан в шторку настроек) — вместе с «Рукой» (0.0.16) и опциональными
страховка на совсем узких экранах, чтобы футер ни при каких подписях не «Очередью» (только организатору)/«Чатом» на мобильном может набраться до
вылезал за ширину окна. */ 78 кнопок разом, в один ряд по 360px они уже не помещаются.
`.room-toolbar.tb-wrap-grid` — класс считает JS (`RoomToolbar.tsx`, по
фактическому числу видимых на мобильном кнопок, а не селекторами
`:nth-child` — организатору достаётся ДОПОЛНИТЕЛЬНАЯ обёртка
`.tb-menu-wrap` вокруг кнопки «Очередь», из-за неё позиция по DOM «плывёт»)
— переключает раскладку на равномерную сетку 4 колонки: 7 кнопок ложатся
4+3, 8 — 4+4, а не как получится через `flex-wrap` (например 6+1, если
просто позволить браузеру перенести лишние). До 6 кнопок раскладка —
обычный flex, они влезают в 360px одним рядом без переноса вовсе. */
@media (max-width: 600px) { @media (max-width: 600px) {
.room-topbar { padding: var(--space-3) var(--space-4); justify-content: flex-end; } .room-topbar { padding: var(--space-3) var(--space-4); justify-content: flex-end; }
.room-title-block { display: none; } .room-title-block { display: none; }
.tb-btn--screenshare, .tb-btn--screenshare,
.tb-btn--fullscreen,
.tb-btn--pip { display: none; } .tb-btn--pip { display: none; }
.room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; flex-wrap: wrap; } .room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; flex-wrap: wrap; }
.room-toolbar.tb-wrap-grid { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
.tb-btn { min-width: 0; padding: 6px 6px; } .tb-btn { min-width: 0; padding: 6px 6px; }
.tb-btn .icon-shell { width: 40px; height: 40px; } .tb-btn .icon-shell { width: 40px; height: 40px; }
.tb-btn span.label { font-size: 11px; } .tb-btn span.label { font-size: 11px; }
} }
/*
* ---------- Полноэкранный режим: топбар и тулбар прячутся в оверлей ----------
* Работает на ЛЮБОЙ ширине экрана (не только мобильной) — как только
* `document.fullscreenElement`, корневой контейнер комнаты получает класс
* `.room-fullscreen-overlay` (`RoomPage.tsx`, вместе с `useFullscreen`).
* Топбар и тулбар выходят из flow-потока `.room-shell` — единственный
* оставшийся в потоке `.room-main` (`flex: 1`) сам растягивается на всю
* высоту, отдельного правила не нужно — и ложатся оверлеем поверх сцены
* сверху/снизу. Появляются по клику/тапу вне элементов управления
* (`RoomPage.tsx`, `handleStageAreaClick`) или — на десктопе — при наведении
* мыши в нижнюю полосу экрана (`FULLSCREEN_FOOTER_HOVER_ZONE_PX`), прячутся
* по повторному клику или сами через `FULLSCREEN_CONTROLS_AUTO_HIDE_MS`
* бездействия.
*
* z-index 150 — выше сцены, но НИЖЕ модалки/шторки настроек (200): если из
* уже открытого оверлея снова открыть «Настройки», диалог должен лечь
* поверх тулбара, а не под него.
*
* Кнопка «Экран» (выход) на мобильном видна и без полноэкранного режима
* (см. блок выше — по аналогии с десктопом), поэтому здесь её отдельно
* возвращать не нужно.
*/
.room-fullscreen-overlay .room-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 150;
background: rgba(20, 22, 26, 0.92);
backdrop-filter: blur(8px);
transform: translateY(-100%);
transition: transform 200ms ease-out;
}
.room-fullscreen-overlay .room-topbar.is-visible { transform: translateY(0); }
.room-fullscreen-overlay .room-toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 150;
background: rgba(20, 22, 26, 0.92);
backdrop-filter: blur(8px);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 200ms ease-out;
}
.room-fullscreen-overlay .room-toolbar.is-visible { transform: translateY(0); }