Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 705f160912 | |||
| 7a5e9d2d8a | |||
| eb4e5ea83f | |||
| b528785249 | |||
| a53ba7c827 | |||
| 71f150d1b6 | |||
| 7549b53ec9 | |||
| 6d65b620fe | |||
| 32949ebc66 | |||
| b8220f682d | |||
| 29a3e78836 | |||
| 3fb3a5d42c | |||
| 975763a3a6 |
16
.env.example
16
.env.example
@@ -81,6 +81,20 @@ LIVEKIT_NODE_IP=127.0.0.1
|
|||||||
# с точкой монтирования тома в обоих сервисах.
|
# с точкой монтирования тома в обоих сервисах.
|
||||||
RECORDINGS_DIR=/recordings
|
RECORDINGS_DIR=/recordings
|
||||||
|
|
||||||
|
# --- Производительность backend ---
|
||||||
|
# Число процессов uvicorn. Один процесс означает, что любой блокирующий вызов
|
||||||
|
# в обработчике останавливает весь event loop: параллельные входы в конференцию
|
||||||
|
# и WS-чат всех участников встают в очередь. Дефолт 2 рассчитан на 4-ядерный
|
||||||
|
# сервер, где ядра делятся с LiveKit (медиа важнее API).
|
||||||
|
UVICORN_WORKERS=2
|
||||||
|
# Пул соединений с БД НА КАЖДЫЙ воркер. Общий расход инстанса —
|
||||||
|
# UVICORN_WORKERS × (DB_POOL_SIZE + DB_MAX_OVERFLOW), плюс соединения Celery
|
||||||
|
# и alembic. Держите сумму заметно ниже max_connections у Postgres (по
|
||||||
|
# умолчанию 100), иначе вместо понятной ошибки приложения получите отказ БД.
|
||||||
|
DB_POOL_SIZE=10
|
||||||
|
DB_MAX_OVERFLOW=10
|
||||||
|
DB_POOL_TIMEOUT=10
|
||||||
|
|
||||||
# --- Email (рассылка саммари + .ics-приглашения) ---
|
# --- Email (рассылка саммари + .ics-приглашения) ---
|
||||||
# `console` — дефолт для dev (письмо только логируется, ссылка подтверждения
|
# `console` — дефолт для dev (письмо только логируется, ссылка подтверждения
|
||||||
# email берётся из логов); `smtp` — реальная отправка через aiosmtplib.
|
# email берётся из логов); `smtp` — реальная отправка через aiosmtplib.
|
||||||
@@ -98,7 +112,7 @@ SMTP_TIMEOUT_S=30
|
|||||||
# --- Версия инстанса (релиз v0.0.1) ---
|
# --- Версия инстанса (релиз v0.0.1) ---
|
||||||
# install.sh копирует значение из корневого файла VERSION при каждой
|
# install.sh копирует значение из корневого файла VERSION при каждой
|
||||||
# установке/обновлении — руками менять не нужно.
|
# установке/обновлении — руками менять не нужно.
|
||||||
VIDCONF_VERSION=0.0.10
|
VIDCONF_VERSION=0.0.13
|
||||||
|
|
||||||
# --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
|
# --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
|
||||||
# `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,
|
# `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,
|
||||||
|
|||||||
101
CHANGELOG.md
101
CHANGELOG.md
@@ -3,6 +3,107 @@
|
|||||||
Формат основан на [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.13] — 2026-07-28
|
||||||
|
|
||||||
|
Снижение нагрузки на сеть: клиент перестаёт получать полное качество всех
|
||||||
|
чужих камер независимо от того, какого размера плитка на экране.
|
||||||
|
|
||||||
|
### Изменено
|
||||||
|
- Включены `adaptiveStream` и `dynacast` в опциях комнаты. Оба флага в LiveKit
|
||||||
|
выключены по умолчанию, из-за чего каждый участник был подписан на полное
|
||||||
|
качество всех чужих треков, а каждый паблишер слал все слои симулкаста, даже
|
||||||
|
когда их никто не смотрит. Теперь качество подписки выбирается по фактическому
|
||||||
|
размеру плитки, а неотрисованные треки уходят в паузу. На локальном стенде
|
||||||
|
(9 участников, паблишеры 720p) входящий поток одного клиента упал с
|
||||||
|
11 110 до 778 кбит/с.
|
||||||
|
|
||||||
|
Вместе с этим начинает экономить уже написанный код, который до сих пор не
|
||||||
|
давал выигрыша: «скрыть остальных» не рендерит карусель (исходящий трафик
|
||||||
|
LiveKit 0.76 → 0.03 Мбит/с), пагинация сетки участников рендерит только
|
||||||
|
текущую страницу, а пауза чужого видео в свёрнутой вкладке работает лишь
|
||||||
|
при включённом `adaptiveStream`.
|
||||||
|
- Контейнеры больше не пересобирают окружение Python при запуске: во все
|
||||||
|
вызовы `uv run` в прод-путях (CMD образа, `command`/`entrypoint`/`healthcheck`
|
||||||
|
сервисов, миграции и seed в `install.sh`) добавлен `--no-sync`. Раньше
|
||||||
|
окружение, собранное на этапе build с `--no-dev`, при каждом старте
|
||||||
|
синхронизировалось заново и подтягивало dev-группу: ~26 МБ загрузок,
|
||||||
|
замедленный старт и ruff/mypy/pytest в рантайме. Healthcheck'и делали то же
|
||||||
|
самое каждые 15 секунд всю жизнь контейнера. Размер `/app/.venv` после
|
||||||
|
запуска: 574 → 456 МБ. Локальная разработка не затронута — там dev-группа
|
||||||
|
нужна и ставится как раньше.
|
||||||
|
|
||||||
|
## [0.0.12] — 2026-07-28
|
||||||
|
|
||||||
|
Разблокировка backend под нагрузкой: вход в конференцию перестаёт отваливаться,
|
||||||
|
когда участники включают микрофоны.
|
||||||
|
|
||||||
|
### Исправлено
|
||||||
|
- Обработчик webhook `track_published` больше не запускает Track Egress внутри
|
||||||
|
своей транзакции. Раньше каждый опубликованный микрофон уходил в сетевой
|
||||||
|
вызов, а на инстансе без профиля `transcribe` (egress-сервиса в деплое нет)
|
||||||
|
этот вызов висел 20–25 секунд, всё это время удерживая соединение с БД. На
|
||||||
|
нагрузочном тесте с 19 участниками пул соединений выгребался за секунды, и
|
||||||
|
вход в конференцию начинал отвечать 500. Теперь запуск уходит в фоновую
|
||||||
|
задачу со своей сессией, а webhook отвечает сразу — LiveKit перестаёт копить
|
||||||
|
очередь доставки и терять события.
|
||||||
|
- Track Egress не запускается вовсе, если транскрибация выключена в настройках
|
||||||
|
инстанса — тот же guard, что уже был в обработчике `room_finished`.
|
||||||
|
- Запуск Track Egress ограничен таймаутом (по умолчанию 3 секунды) вместо
|
||||||
|
ожидания собственного таймаута LiveKit.
|
||||||
|
|
||||||
|
### Изменено
|
||||||
|
- Пул соединений с БД задаётся явно (`DB_POOL_SIZE`, `DB_MAX_OVERFLOW`,
|
||||||
|
`DB_POOL_TIMEOUT`) вместо дефолта SQLAlchemy 5 + 10. Считайте бюджет на весь
|
||||||
|
инстанс: каждый воркер держит свой пул, и сумма должна оставаться заметно
|
||||||
|
ниже `max_connections` у Postgres.
|
||||||
|
- Backend запускается с несколькими процессами uvicorn (`UVICORN_WORKERS`,
|
||||||
|
по умолчанию 2). Одиночный процесс означал, что любой блокирующий вызов
|
||||||
|
останавливает и параллельные запросы, и WS-чат всех участников. Дефолт 2, а
|
||||||
|
не по числу ядер: на четырёхъядерном сервере ядра делятся с LiveKit.
|
||||||
|
|
||||||
|
## [0.0.11] — 2026-07-28
|
||||||
|
|
||||||
|
Выбор режима показа участников в конференции, скрытие остальных и круглая
|
||||||
|
иконка участника при выключенной камере.
|
||||||
|
|
||||||
|
### Добавлено
|
||||||
|
- Выбор режима показа участников на сцене вместо автоматической раскладки:
|
||||||
|
«Стандарт» (крупная плитка плюс карусель остальных сбоку, как было),
|
||||||
|
«Плитки» (все участники равными плитками) и «Живые плитки» (плитками —
|
||||||
|
только те, у кого включена камера, остальные в карусели). Кто именно
|
||||||
|
показан крупно в «Стандарте», по-прежнему решает прежняя логика фокуса
|
||||||
|
(новая демонстрация → закреплённый → говорящий с видео → говорящий).
|
||||||
|
Выбор сохраняется между заходами в комнату.
|
||||||
|
- Скрытие остальных участников — на сцене остаётся только основная плитка.
|
||||||
|
Скрыть можно из меню «Вид», из шторки настроек на мобильном и кнопкой над
|
||||||
|
колонкой миниатюр; вернуть — кнопкой «Показать остальных (N)», которая
|
||||||
|
видна всё время, пока кто-то скрыт. В режиме «Плитки» скрывать нечего,
|
||||||
|
переключатель там заблокирован.
|
||||||
|
- Переключатель вида: кнопка «Вид» с поповером в тулбаре на широком экране;
|
||||||
|
на мобильном — секция «Вид» в шторке настроек, чтобы не добавлять шестую
|
||||||
|
кнопку в уже ужатый тулбар.
|
||||||
|
|
||||||
|
### Изменено
|
||||||
|
- Демонстрация экрана временно перебивает выбранный режим: пока идёт шэр,
|
||||||
|
сцена ведёт себя как «Стандарт», а по его завершении возвращается к
|
||||||
|
выбранному виду.
|
||||||
|
- Равномерная сетка плиток стала пригодна для телефона: 2 колонки от 360px
|
||||||
|
ширины и портретная раскладка 2×3 вместо двух плиток на страницу, которые
|
||||||
|
давал набор раскладок библиотеки. Лишние участники уходят на следующую
|
||||||
|
страницу — листается свайпом и стрелками.
|
||||||
|
|
||||||
|
### Исправлено
|
||||||
|
- Иконка участника при выключенной камере больше не превращается в эллипс:
|
||||||
|
размер считается от узкой стороны плитки (container-запросы), а не как
|
||||||
|
проценты от разных сторон. В крупной плитке иконка занимает примерно её
|
||||||
|
половину, в миниатюрах карусели — всю узкую сторону с отступом 5px; на
|
||||||
|
большой плитке фокуса иконка больше не упирается в прежний потолок 96px.
|
||||||
|
- Мини-плеер в Chrome открывался на самом пользователе вместо того, что он
|
||||||
|
видел крупно: сцена в PiP-окне — отдельный экземпляр компонента и выбирала
|
||||||
|
фокус с нуля, доходя до фолбэка «показать себя». Теперь ключ фокуса
|
||||||
|
переживает переезд в мини-окно и обратно. В Safari (video-фолбэк вместо
|
||||||
|
Document PiP) поведение не менялось.
|
||||||
|
|
||||||
## [0.0.10] — 2026-07-28
|
## [0.0.10] — 2026-07-28
|
||||||
|
|
||||||
Разбивка метрик по контейнерам в Grafana и плашка с характеристиками сервера.
|
Разбивка метрик по контейнерам в Grafana и плашка с характеристиками сервера.
|
||||||
|
|||||||
@@ -37,4 +37,20 @@ EXPOSE 8000
|
|||||||
HEALTHCHECK --interval=10s --timeout=5s --retries=10 --start-period=15s \
|
HEALTHCHECK --interval=10s --timeout=5s --retries=10 --start-period=15s \
|
||||||
CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:8000/api/health')" || exit 1
|
CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:8000/api/health')" || exit 1
|
||||||
|
|
||||||
CMD ["uv", "run", "uvicorn", "main:create_app", "--factory", "--host", "0.0.0.0", "--port", "8000"]
|
# Число воркеров — из окружения (`UVICORN_WORKERS`, см. docker-compose.yml).
|
||||||
|
# Один процесс означает, что любой блокирующий вызов в обработчике
|
||||||
|
# останавливает весь event loop: параллельные запросы и WS-чат всех
|
||||||
|
# участников встают в очередь. Дефолт 2, а не «по числу ядер»: медиа
|
||||||
|
# важнее API, и на 4-ядерном сервере LiveKit в пике забирает 1.6 ядра.
|
||||||
|
#
|
||||||
|
# `sh -c` нужен ради подстановки переменной (exec-форма её не делает),
|
||||||
|
# `exec` — чтобы uvicorn получил PID 1 и корректно принимал SIGTERM.
|
||||||
|
#
|
||||||
|
# `--no-sync`: окружение уже собрано выше (`uv sync --frozen --no-dev`), и
|
||||||
|
# пересобирать его в рантайме незачем. Без флага `uv run` перед каждым
|
||||||
|
# запуском заново синхронизирует venv И ПОДТЯГИВАЕТ dev-группу (ruff, mypy,
|
||||||
|
# pytest — ~30 МБ загрузок на каждый старт контейнера, dev-инструменты в
|
||||||
|
# проде и раздутый venv). То же касается healthcheck'ов в
|
||||||
|
# deploy/docker-compose.yml, которые дёргают `uv run` каждые 15 секунд.
|
||||||
|
CMD ["sh", "-c", \
|
||||||
|
"exec uv run --no-sync uvicorn main:create_app --factory --host 0.0.0.0 --port 8000 --workers ${UVICORN_WORKERS:-2}"]
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
import logging
|
import logging
|
||||||
from typing import Annotated, Any, cast
|
from typing import Annotated, Any, cast
|
||||||
|
|
||||||
from fastapi import APIRouter, Depends, Header, HTTPException, Request, status
|
from fastapi import APIRouter, BackgroundTasks, Depends, Header, HTTPException, Request, status
|
||||||
from livekit import api
|
from livekit import api
|
||||||
from sqlalchemy import CursorResult
|
from sqlalchemy import CursorResult
|
||||||
from sqlalchemy.dialects.postgresql import insert as pg_insert
|
from sqlalchemy.dialects.postgresql import insert as pg_insert
|
||||||
@@ -22,6 +22,7 @@ router = APIRouter(prefix="/api/v1/livekit", tags=["livekit"])
|
|||||||
@router.post("/webhook")
|
@router.post("/webhook")
|
||||||
async def receive_webhook(
|
async def receive_webhook(
|
||||||
request: Request,
|
request: Request,
|
||||||
|
background: BackgroundTasks,
|
||||||
session: Annotated[AsyncSession, Depends(get_session)],
|
session: Annotated[AsyncSession, Depends(get_session)],
|
||||||
authorization: Annotated[str | None, Header()] = None,
|
authorization: Annotated[str | None, Header()] = None,
|
||||||
) -> dict[str, str]:
|
) -> dict[str, str]:
|
||||||
@@ -30,6 +31,11 @@ async def receive_webhook(
|
|||||||
Дедупликация по `event.id`: `INSERT ... ON CONFLICT DO NOTHING` в
|
Дедупликация по `event.id`: `INSERT ... ON CONFLICT DO NOTHING` в
|
||||||
`livekit_webhook_events` в одной транзакции с эффектами обработчика —
|
`livekit_webhook_events` в одной транзакции с эффектами обработчика —
|
||||||
при конфликте (дубль) эффекты пропускаются, но ответ всё равно 200.
|
при конфликте (дубль) эффекты пропускаются, но ответ всё равно 200.
|
||||||
|
|
||||||
|
Всё, что требует сети (запуск Track Egress), уходит в `background` и
|
||||||
|
выполняется уже после ответа: обработчик держит соединение с БД и
|
||||||
|
открытую транзакцию, а LiveKit при медленном ответе копит очередь
|
||||||
|
доставки и в итоге дропает события (см. `services.egress.run_track_egress`).
|
||||||
"""
|
"""
|
||||||
settings = get_settings()
|
settings = get_settings()
|
||||||
raw_body = await request.body()
|
raw_body = await request.body()
|
||||||
@@ -57,7 +63,7 @@ async def receive_webhook(
|
|||||||
await session.commit()
|
await session.commit()
|
||||||
return {"status": "duplicate"}
|
return {"status": "duplicate"}
|
||||||
|
|
||||||
dispatcher = WebhookDispatcher(session)
|
dispatcher = WebhookDispatcher(session, schedule=background.add_task)
|
||||||
await dispatcher.dispatch(event)
|
await dispatcher.dispatch(event)
|
||||||
await session.commit()
|
await session.commit()
|
||||||
return {"status": "ok"}
|
return {"status": "ok"}
|
||||||
|
|||||||
@@ -20,6 +20,24 @@ class Settings(BaseSettings):
|
|||||||
redis_url: str = "redis://localhost:6379/0"
|
redis_url: str = "redis://localhost:6379/0"
|
||||||
plugins_config_path: str = "../config/plugins.yaml"
|
plugins_config_path: str = "../config/plugins.yaml"
|
||||||
|
|
||||||
|
# --- Пул соединений с БД ---
|
||||||
|
# Дефолт SQLAlchemy (5 + 10) на нагрузочном тесте 28.07.2026 выгребался
|
||||||
|
# за секунды: 226 ошибок `QueuePool limit of size 5 overflow 10 reached`
|
||||||
|
# и 37 ответов 500 на путях входа в конференцию.
|
||||||
|
#
|
||||||
|
# ⚠️ Бюджет соединений считается на ВЕСЬ инстанс, а не на процесс: каждый
|
||||||
|
# воркер uvicorn (`UVICORN_WORKERS`) держит собственный пул, плюс
|
||||||
|
# соединения нужны Celery-воркерам и alembic при миграциях. При
|
||||||
|
# `max_connections=100` у Postgres и двух воркерах 2 × (10 + 10) = 40
|
||||||
|
# оставляет запас. Поднимая значения на более крупном сервере, поднимайте
|
||||||
|
# и `max_connections` — иначе вместо понятной ошибки приложения получите
|
||||||
|
# отказ Postgres, который диагностируется куда хуже.
|
||||||
|
db_pool_size: int = 10
|
||||||
|
db_max_overflow: int = 10
|
||||||
|
# 10 секунд вместо дефолтных 30 — сознательно: пусть запрос падает быстро
|
||||||
|
# и показывает проблему, а не висит полминуты, делая вид, что всё живо.
|
||||||
|
db_pool_timeout: int = 10
|
||||||
|
|
||||||
# --- Версия инстанса (релиз v0.0.1) ---
|
# --- Версия инстанса (релиз v0.0.1) ---
|
||||||
# install.sh копирует значение из файла `VERSION` (корень репозитория) в
|
# install.sh копирует значение из файла `VERSION` (корень репозитория) в
|
||||||
# `.env` при каждой установке/обновлении — здесь только чтение готового
|
# `.env` при каждой установке/обновлении — здесь только чтение готового
|
||||||
@@ -59,6 +77,13 @@ class Settings(BaseSettings):
|
|||||||
# (см. `deploy/docker-compose.yml`); в тестах переопределяется на `tmp_path`.
|
# (см. `deploy/docker-compose.yml`); в тестах переопределяется на `tmp_path`.
|
||||||
recordings_dir: str = "/recordings"
|
recordings_dir: str = "/recordings"
|
||||||
|
|
||||||
|
# Таймаут запуска Track Egress. Когда egress-сервиса в деплое нет (профиль
|
||||||
|
# `transcribe` не поднят), LiveKit ждёт ответа воркера через Redis до
|
||||||
|
# собственного таймаута psrpc — на тесте 28.07.2026 это давало по 20–25
|
||||||
|
# секунд на каждый вызов. Ждать столько бессмысленно: если egress жив, он
|
||||||
|
# отвечает за доли секунды.
|
||||||
|
egress_start_timeout_s: float = 3.0
|
||||||
|
|
||||||
# --- Email (SMTP-бэкенд) ---
|
# --- Email (SMTP-бэкенд) ---
|
||||||
# `console` — дефолт для dev (письмо только логируется); `smtp` — реальная
|
# `console` — дефолт для dev (письмо только логируется); `smtp` — реальная
|
||||||
# отправка через aiosmtplib. Секреты SMTP — только в `.env` (инвариант №6),
|
# отправка через aiosmtplib. Секреты SMTP — только в `.env` (инвариант №6),
|
||||||
|
|||||||
@@ -13,7 +13,16 @@ from core.config import get_settings
|
|||||||
|
|
||||||
settings = get_settings()
|
settings = get_settings()
|
||||||
|
|
||||||
engine: AsyncEngine = create_async_engine(settings.database_url, pool_pre_ping=True)
|
engine: AsyncEngine = create_async_engine(
|
||||||
|
settings.database_url,
|
||||||
|
pool_pre_ping=True,
|
||||||
|
# Параметры пула — в настройках (`core/config.py`, там же расчёт бюджета
|
||||||
|
# соединений на инстанс). Дефолт SQLAlchemy 5 + 10 под нагрузкой
|
||||||
|
# выгребался за секунды.
|
||||||
|
pool_size=settings.db_pool_size,
|
||||||
|
max_overflow=settings.db_max_overflow,
|
||||||
|
pool_timeout=settings.db_pool_timeout,
|
||||||
|
)
|
||||||
|
|
||||||
async_session_maker = async_sessionmaker(engine, expire_on_commit=False)
|
async_session_maker = async_sessionmaker(engine, expire_on_commit=False)
|
||||||
|
|
||||||
|
|||||||
@@ -5,14 +5,24 @@
|
|||||||
транскодирования в `.ogg` на общий volume `recordings_dir`. Финализация
|
транскодирования в `.ogg` на общий volume `recordings_dir`. Финализация
|
||||||
результата (итоговый `location`/ошибка) приходит асинхронно через webhook
|
результата (итоговый `location`/ошибка) приходит асинхронно через webhook
|
||||||
`egress_ended` — здесь только сам запуск и `egress_id`/`started_at` из ответа.
|
`egress_ended` — здесь только сам запуск и `egress_id`/`started_at` из ответа.
|
||||||
|
|
||||||
|
Запуск вынесен из тела webhook-обработчика в фоновую задачу
|
||||||
|
(`run_track_egress`) — см. докстринг этой функции.
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
import asyncio
|
||||||
|
import logging
|
||||||
|
import uuid
|
||||||
from dataclasses import dataclass
|
from dataclasses import dataclass
|
||||||
from datetime import UTC, datetime
|
from datetime import UTC, datetime
|
||||||
|
|
||||||
from livekit import api
|
from livekit import api
|
||||||
|
|
||||||
from core.config import get_settings
|
from core.config import get_settings
|
||||||
|
from core.db import async_session_maker
|
||||||
|
from repositories.conferences import AudioTrackRepository
|
||||||
|
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
|
||||||
@dataclass(frozen=True, slots=True)
|
@dataclass(frozen=True, slots=True)
|
||||||
@@ -37,6 +47,10 @@ async def start_track_egress(room_name: str, track_sid: str, filepath: str) -> E
|
|||||||
api_secret=settings.livekit_api_secret,
|
api_secret=settings.livekit_api_secret,
|
||||||
)
|
)
|
||||||
try:
|
try:
|
||||||
|
# Без таймаута вызов висит до собственного таймаута psrpc LiveKit
|
||||||
|
# (20–25 с, когда egress-воркера в деплое нет). `TimeoutError`
|
||||||
|
# ловит вызывающая сторона наравне с прочими ошибками запуска.
|
||||||
|
async with asyncio.timeout(settings.egress_start_timeout_s):
|
||||||
info = await lkapi.egress.start_track_egress(
|
info = await lkapi.egress.start_track_egress(
|
||||||
api.TrackEgressRequest(
|
api.TrackEgressRequest(
|
||||||
room_name=room_name,
|
room_name=room_name,
|
||||||
@@ -56,3 +70,65 @@ async def start_track_egress(room_name: str, track_sid: str, filepath: str) -> E
|
|||||||
else datetime.now(UTC)
|
else datetime.now(UTC)
|
||||||
)
|
)
|
||||||
return EgressStartResult(egress_id=info.egress_id, started_at=started_at)
|
return EgressStartResult(egress_id=info.egress_id, started_at=started_at)
|
||||||
|
|
||||||
|
|
||||||
|
async def run_track_egress(
|
||||||
|
*,
|
||||||
|
room_name: str,
|
||||||
|
track_sid: str,
|
||||||
|
filepath: str,
|
||||||
|
session_id: uuid.UUID,
|
||||||
|
participant_id: uuid.UUID,
|
||||||
|
) -> None:
|
||||||
|
"""Запустить Track Egress и записать строку трека — ФОНОВАЯ задача вебхука.
|
||||||
|
|
||||||
|
Почему не внутри обработчика. `POST /api/v1/livekit/webhook` держит
|
||||||
|
соединение с БД и открытую транзакцию всё время своей работы (INSERT в
|
||||||
|
`livekit_webhook_events` сделан, commit — после обработчика). Пока здесь
|
||||||
|
жил сетевой вызов к egress, каждое событие `track_published` занимало
|
||||||
|
соединение на 20–25 секунд, и на нагрузочном тесте 28.07.2026 пул
|
||||||
|
выгребался за секунды: 226 ошибок `QueuePool limit`, 37 ответов 500 на
|
||||||
|
путях входа в конференцию, 33 `dropped webhook` со стороны LiveKit
|
||||||
|
(очередь доставки росла до 56 секунд).
|
||||||
|
|
||||||
|
Поэтому обработчик отвечает 200 сразу, а сюда попадает только то, что
|
||||||
|
требует сети. Своя сессия БД (`async_session_maker`) обязательна: сессия
|
||||||
|
запроса к этому моменту уже закрыта вместе с ответом.
|
||||||
|
|
||||||
|
Идемпотентность сохраняется: `AudioTrackRepository.create` — это
|
||||||
|
`INSERT ... ON CONFLICT DO NOTHING` по `uq_session_track`, а проверка
|
||||||
|
«трек уже пишется» осталась в обработчике.
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
result = await start_track_egress(room_name, track_sid, filepath)
|
||||||
|
except Exception as exc: # noqa: BLE001 — недоступность egress не должна ронять фон
|
||||||
|
# Деплой-профиль (блок D): egress — необязательный сервис профиля
|
||||||
|
# `transcribe`; без него запись просто не стартует для этого трека.
|
||||||
|
# Строку `session_audio_tracks` не создаём — у нас нет `egress_id`,
|
||||||
|
# по которому её мог бы финализировать `egress_ended`.
|
||||||
|
logger.warning(
|
||||||
|
"track_published: не удалось запустить egress для трека %s сеанса %s: %s",
|
||||||
|
track_sid,
|
||||||
|
session_id,
|
||||||
|
exc,
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
|
async with async_session_maker() as session:
|
||||||
|
await AudioTrackRepository(session).create(
|
||||||
|
session_id=session_id,
|
||||||
|
participant_id=participant_id,
|
||||||
|
track_sid=track_sid,
|
||||||
|
egress_id=result.egress_id,
|
||||||
|
file_path=filepath,
|
||||||
|
started_at=result.started_at,
|
||||||
|
)
|
||||||
|
await session.commit()
|
||||||
|
|
||||||
|
logger.info(
|
||||||
|
"track_published: сеанс=%s участник=%s трек=%s egress=%s",
|
||||||
|
session_id,
|
||||||
|
participant_id,
|
||||||
|
track_sid,
|
||||||
|
result.egress_id,
|
||||||
|
)
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
|
|
||||||
import logging
|
import logging
|
||||||
import uuid
|
import uuid
|
||||||
|
from collections.abc import Callable
|
||||||
from datetime import UTC, datetime
|
from datetime import UTC, datetime
|
||||||
|
|
||||||
from livekit.protocol.egress import EgressStatus
|
from livekit.protocol.egress import EgressStatus
|
||||||
@@ -26,7 +27,7 @@ from repositories.conferences import (
|
|||||||
ConferenceRepository,
|
ConferenceRepository,
|
||||||
ConferenceSessionRepository,
|
ConferenceSessionRepository,
|
||||||
)
|
)
|
||||||
from services.egress import start_track_egress
|
from services.egress import run_track_egress
|
||||||
from services.instance_settings import InstanceSettingsService
|
from services.instance_settings import InstanceSettingsService
|
||||||
from services.pipeline_producer import enqueue_pipeline
|
from services.pipeline_producer import enqueue_pipeline
|
||||||
|
|
||||||
@@ -53,13 +54,27 @@ def _egress_ns_to_datetime(nanoseconds: int) -> datetime | None:
|
|||||||
|
|
||||||
|
|
||||||
class WebhookDispatcher:
|
class WebhookDispatcher:
|
||||||
"""Диспатчит `WebhookEvent` на обработчик по типу события."""
|
"""Диспатчит `WebhookEvent` на обработчик по типу события.
|
||||||
|
|
||||||
def __init__(self, session: AsyncSession) -> None:
|
`schedule` — планировщик фоновых задач: вызывается как
|
||||||
|
`schedule(coro_func, **kwargs)` и обязан вернуть управление немедленно,
|
||||||
|
не дожидаясь выполнения. В приложении это `BackgroundTasks.add_task`
|
||||||
|
FastAPI (задача стартует после отправки ответа), в тестах — вызовы
|
||||||
|
просто записываются. Через него уходит запуск Track Egress: сетевому
|
||||||
|
вызову не место внутри транзакции вебхука (см. `_on_track_published`).
|
||||||
|
"""
|
||||||
|
|
||||||
|
def __init__(
|
||||||
|
self,
|
||||||
|
session: AsyncSession,
|
||||||
|
*,
|
||||||
|
schedule: Callable[..., object],
|
||||||
|
) -> None:
|
||||||
self._conferences = ConferenceRepository(session)
|
self._conferences = ConferenceRepository(session)
|
||||||
self._sessions = ConferenceSessionRepository(session)
|
self._sessions = ConferenceSessionRepository(session)
|
||||||
self._audio_tracks = AudioTrackRepository(session)
|
self._audio_tracks = AudioTrackRepository(session)
|
||||||
self._instance_settings = InstanceSettingsService(session)
|
self._instance_settings = InstanceSettingsService(session)
|
||||||
|
self._schedule = schedule
|
||||||
|
|
||||||
async def dispatch(self, event: WebhookEvent) -> None:
|
async def dispatch(self, event: WebhookEvent) -> None:
|
||||||
"""Обработать одно webhook-событие; неизвестный тип события — no-op."""
|
"""Обработать одно webhook-событие; неизвестный тип события — no-op."""
|
||||||
@@ -161,15 +176,32 @@ class WebhookDispatcher:
|
|||||||
)
|
)
|
||||||
|
|
||||||
async def _on_track_published(self, event: WebhookEvent) -> None:
|
async def _on_track_published(self, event: WebhookEvent) -> None:
|
||||||
"""Запустить Track Egress для опубликованного аудиотрека микрофона (ADR-002).
|
"""Запланировать Track Egress для опубликованного аудиотрека микрофона (ADR-002).
|
||||||
|
|
||||||
Видео/скриншеринг и т.п. — no-op (диаризация не нужна: транскрибируем
|
Видео/скриншеринг и т.п. — no-op (диаризация не нужна: транскрибируем
|
||||||
только речь, трек = спикер). Идемпотентно: если строка трека уже
|
только речь, трек = спикер). Идемпотентно: если строка трека уже
|
||||||
существует (гонка повторной доставки), egress повторно не запускается.
|
существует (гонка повторной доставки), egress повторно не запускается.
|
||||||
|
|
||||||
|
Сам запуск уходит в фоновую задачу (`services.egress.run_track_egress`):
|
||||||
|
здесь остаются только быстрые проверки по БД, потому что обработчик
|
||||||
|
выполняется внутри открытой транзакции вебхука. Обоснование с цифрами —
|
||||||
|
в докстринге `run_track_egress`.
|
||||||
"""
|
"""
|
||||||
if event.track.type != TrackType.AUDIO or event.track.source != TrackSource.MICROPHONE:
|
if event.track.type != TrackType.AUDIO or event.track.source != TrackSource.MICROPHONE:
|
||||||
return
|
return
|
||||||
|
|
||||||
|
# Транскрибация выключена — записывать нечего. Тот же guard, что и в
|
||||||
|
# `_on_room_finished`: без него на инстансе без профиля `transcribe`
|
||||||
|
# (egress-контейнера в деплое нет) каждый микрофон превращался в
|
||||||
|
# заведомо безнадёжный сетевой вызов длиной в 20–25 секунд.
|
||||||
|
cfg = await self._instance_settings.get()
|
||||||
|
if not cfg.transcriber.enabled:
|
||||||
|
logger.debug(
|
||||||
|
"livekit webhook track_published: транскрибация выключена — трек %s пропущен",
|
||||||
|
event.track.sid,
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
conference = await self._conferences.get_by_slug(event.room.name)
|
conference = await self._conferences.get_by_slug(event.room.name)
|
||||||
if conference is None:
|
if conference is None:
|
||||||
logger.warning(
|
logger.warning(
|
||||||
@@ -216,37 +248,13 @@ class WebhookDispatcher:
|
|||||||
filepath = (
|
filepath = (
|
||||||
f"{settings.recordings_dir}/{session_record.id}/{participant.id}_{event.track.sid}.ogg"
|
f"{settings.recordings_dir}/{session_record.id}/{participant.id}_{event.track.sid}.ogg"
|
||||||
)
|
)
|
||||||
try:
|
self._schedule(
|
||||||
result = await start_track_egress(event.room.name, event.track.sid, filepath)
|
run_track_egress,
|
||||||
except Exception as exc: # noqa: BLE001 — недоступность egress не должна ронять webhook
|
room_name=event.room.name,
|
||||||
# Деплой-профиль (блок D): egress — необязательный сервис профиля
|
track_sid=event.track.sid,
|
||||||
# `transcribe`; без него запись просто не стартует для этого трека
|
filepath=filepath,
|
||||||
# (риск «Потерян webhook track_published»).
|
|
||||||
# Строку `session_audio_tracks` не создаём — у нас нет `egress_id`,
|
|
||||||
# по которому её мог бы финализировать `egress_ended`.
|
|
||||||
logger.warning(
|
|
||||||
"livekit webhook track_published: не удалось запустить egress для трека %s "
|
|
||||||
"сеанса %s: %s",
|
|
||||||
event.track.sid,
|
|
||||||
session_record.id,
|
|
||||||
exc,
|
|
||||||
)
|
|
||||||
return
|
|
||||||
|
|
||||||
await self._audio_tracks.create(
|
|
||||||
session_id=session_record.id,
|
session_id=session_record.id,
|
||||||
participant_id=participant.id,
|
participant_id=participant.id,
|
||||||
track_sid=event.track.sid,
|
|
||||||
egress_id=result.egress_id,
|
|
||||||
file_path=filepath,
|
|
||||||
started_at=result.started_at,
|
|
||||||
)
|
|
||||||
logger.info(
|
|
||||||
"livekit webhook track_published: сеанс=%s участник=%s трек=%s egress=%s",
|
|
||||||
session_record.id,
|
|
||||||
participant.id,
|
|
||||||
event.track.sid,
|
|
||||||
result.egress_id,
|
|
||||||
)
|
)
|
||||||
|
|
||||||
async def _on_egress_ended(self, event: WebhookEvent) -> None:
|
async def _on_egress_ended(self, event: WebhookEvent) -> None:
|
||||||
|
|||||||
@@ -3,9 +3,13 @@
|
|||||||
цикл закреплённой/незакреплённой конференции — на фикстурах payload'ов LiveKit.
|
цикл закреплённой/незакреплённой конференции — на фикстурах payload'ов LiveKit.
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
import asyncio
|
||||||
import base64
|
import base64
|
||||||
import hashlib
|
import hashlib
|
||||||
|
import json
|
||||||
import uuid
|
import uuid
|
||||||
|
from collections.abc import AsyncGenerator
|
||||||
|
from contextlib import asynccontextmanager
|
||||||
from datetime import UTC, datetime, timedelta
|
from datetime import UTC, datetime, timedelta
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from unittest.mock import AsyncMock, Mock
|
from unittest.mock import AsyncMock, Mock
|
||||||
@@ -13,10 +17,13 @@ from unittest.mock import AsyncMock, Mock
|
|||||||
import httpx
|
import httpx
|
||||||
import jwt
|
import jwt
|
||||||
import pytest
|
import pytest
|
||||||
|
from google.protobuf.json_format import ParseDict
|
||||||
|
from livekit.protocol.webhook import WebhookEvent
|
||||||
from sqlalchemy import select
|
from sqlalchemy import select
|
||||||
from sqlalchemy.dialects.postgresql import insert as pg_insert
|
from sqlalchemy.dialects.postgresql import insert as pg_insert
|
||||||
from sqlalchemy.ext.asyncio import AsyncSession
|
from sqlalchemy.ext.asyncio import AsyncSession
|
||||||
|
|
||||||
|
import services.egress as egress_module
|
||||||
import services.webhook_handlers as webhook_handlers_module
|
import services.webhook_handlers as webhook_handlers_module
|
||||||
from core.config import get_settings
|
from core.config import get_settings
|
||||||
from core.security import hash_password
|
from core.security import hash_password
|
||||||
@@ -54,6 +61,52 @@ def _sign(body: bytes) -> str:
|
|||||||
return jwt.encode(payload, settings.livekit_api_secret, algorithm="HS256")
|
return jwt.encode(payload, settings.livekit_api_secret, algorithm="HS256")
|
||||||
|
|
||||||
|
|
||||||
|
def _parse_fixture_event(name: str, **placeholders: str) -> WebhookEvent:
|
||||||
|
"""Разобрать фикстуру в `WebhookEvent` — для тестов диспатчера без HTTP-слоя."""
|
||||||
|
return ParseDict(json.loads(_load_fixture(name, **placeholders)), WebhookEvent())
|
||||||
|
|
||||||
|
|
||||||
|
async def _set_transcriber_enabled(session: AsyncSession, *, enabled: bool) -> None:
|
||||||
|
"""Выставить `instance_settings.transcriber.enabled`.
|
||||||
|
|
||||||
|
Пишется тем же `db_session` (savepoint), что и обработчик webhook (подмена
|
||||||
|
`get_session` в фикстуре `app`) — видна обработчику без реального коммита
|
||||||
|
в dev-БД. Тесты, которым важен `track_published`, обязаны выставлять флаг
|
||||||
|
ЯВНО: значение в dev-БД непредсказуемо, а обработчик с версии 0.0.12
|
||||||
|
выходит на выключенной транскрибации раньше всех остальных проверок.
|
||||||
|
"""
|
||||||
|
value: dict[str, object] = {
|
||||||
|
"enabled": enabled,
|
||||||
|
"provider": "faster_whisper_cpu" if enabled else "null",
|
||||||
|
"model": "small" if enabled else None,
|
||||||
|
"language": "ru",
|
||||||
|
"options": {},
|
||||||
|
}
|
||||||
|
await session.execute(
|
||||||
|
pg_insert(InstanceSetting)
|
||||||
|
.values(key="transcriber", value=value)
|
||||||
|
.on_conflict_do_update(index_elements=["key"], set_={"value": value})
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
def _use_test_session_in_background(
|
||||||
|
monkeypatch: pytest.MonkeyPatch, db_session: AsyncSession
|
||||||
|
) -> None:
|
||||||
|
"""Заставить фоновую задачу egress работать с тестовой (savepoint) сессией.
|
||||||
|
|
||||||
|
`run_track_egress` намеренно берёт СВОЮ сессию (`async_session_maker`):
|
||||||
|
в бою сессия запроса к моменту фоновой задачи уже закрыта. В тестах такое
|
||||||
|
подключение шло бы мимо откатываемой транзакции и не увидело бы ни
|
||||||
|
конференции, ни участника — поэтому подменяем фабрику на тестовую сессию.
|
||||||
|
"""
|
||||||
|
|
||||||
|
@asynccontextmanager
|
||||||
|
async def _maker() -> AsyncGenerator[AsyncSession, None]:
|
||||||
|
yield db_session
|
||||||
|
|
||||||
|
monkeypatch.setattr(egress_module, "async_session_maker", _maker)
|
||||||
|
|
||||||
|
|
||||||
async def _post_webhook(client: httpx.AsyncClient, body: bytes) -> httpx.Response:
|
async def _post_webhook(client: httpx.AsyncClient, body: bytes) -> httpx.Response:
|
||||||
return await client.post(
|
return await client.post(
|
||||||
WEBHOOK_URL,
|
WEBHOOK_URL,
|
||||||
@@ -319,8 +372,10 @@ async def test_track_published_by_guest_starts_egress_and_creates_track_row(
|
|||||||
mock_start = AsyncMock(
|
mock_start = AsyncMock(
|
||||||
return_value=EgressStartResult(egress_id="EG_guest_track", started_at=started_at)
|
return_value=EgressStartResult(egress_id="EG_guest_track", started_at=started_at)
|
||||||
)
|
)
|
||||||
monkeypatch.setattr(webhook_handlers_module, "start_track_egress", mock_start)
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
guest = await _make_guest(db_session, conference)
|
guest = await _make_guest(db_session, conference)
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
@@ -382,8 +437,10 @@ async def test_track_published_survives_egress_unavailable(
|
|||||||
) -> None:
|
) -> None:
|
||||||
"""Недоступность egress не должна ронять webhook (блок D): 200 + warning, без строки трека."""
|
"""Недоступность egress не должна ронять webhook (блок D): 200 + warning, без строки трека."""
|
||||||
mock_start = AsyncMock(side_effect=RuntimeError("egress service unavailable"))
|
mock_start = AsyncMock(side_effect=RuntimeError("egress service unavailable"))
|
||||||
monkeypatch.setattr(webhook_handlers_module, "start_track_egress", mock_start)
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
user = await _make_user(db_session, "webhook-track-egress-down@example.com")
|
user = await _make_user(db_session, "webhook-track-egress-down@example.com")
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
@@ -417,13 +474,169 @@ async def test_track_published_survives_egress_unavailable(
|
|||||||
assert tracks == []
|
assert tracks == []
|
||||||
|
|
||||||
|
|
||||||
|
async def test_track_published_skips_egress_when_transcription_disabled(
|
||||||
|
client: httpx.AsyncClient, db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
||||||
|
) -> None:
|
||||||
|
"""Транскрибация выключена → egress не дёргается вовсе (релиз 0.0.12).
|
||||||
|
|
||||||
|
Симметрично guard'у в `_on_room_finished`. Без него на инстансе без профиля
|
||||||
|
`transcribe` (egress-контейнера в деплое нет) каждый микрофонный трек
|
||||||
|
превращался в заведомо безнадёжный вызов длиной в таймаут psrpc LiveKit —
|
||||||
|
20–25 секунд внутри открытой транзакции вебхука. На нагрузочном тесте
|
||||||
|
28.07.2026 это выгребало пул соединений и роняло вход в конференцию в 500.
|
||||||
|
"""
|
||||||
|
mock_start = AsyncMock()
|
||||||
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=False)
|
||||||
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
|
user = await _make_user(db_session, "webhook-track-transcriber-off@example.com")
|
||||||
|
await db_session.commit()
|
||||||
|
|
||||||
|
joined = _load_fixture(
|
||||||
|
"participant_joined.json",
|
||||||
|
event_id=f"evt-{uuid.uuid4()}",
|
||||||
|
room_name=conference.slug,
|
||||||
|
identity=str(user.id),
|
||||||
|
)
|
||||||
|
assert (await _post_webhook(client, joined)).status_code == 200
|
||||||
|
|
||||||
|
track_sid = "TR_transcriber_off"
|
||||||
|
published = _load_fixture(
|
||||||
|
"track_published.json",
|
||||||
|
event_id=f"evt-{uuid.uuid4()}",
|
||||||
|
room_name=conference.slug,
|
||||||
|
identity=str(user.id),
|
||||||
|
track_sid=track_sid,
|
||||||
|
)
|
||||||
|
assert (await _post_webhook(client, published)).status_code == 200
|
||||||
|
|
||||||
|
mock_start.assert_not_awaited()
|
||||||
|
tracks = (
|
||||||
|
await db_session.scalars(
|
||||||
|
select(SessionAudioTrack).where(SessionAudioTrack.track_sid == track_sid)
|
||||||
|
)
|
||||||
|
).all()
|
||||||
|
assert tracks == []
|
||||||
|
|
||||||
|
|
||||||
|
async def test_track_published_does_not_call_egress_inside_transaction(
|
||||||
|
db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
||||||
|
) -> None:
|
||||||
|
"""Запуск egress уходит в фон, а не выполняется внутри обработчика (релиз 0.0.12).
|
||||||
|
|
||||||
|
Проверяется не время ответа (в тестах ASGI-транспорт дожидается фоновых
|
||||||
|
задач), а сама суть: пока открыта транзакция вебхука, сетевого вызова не
|
||||||
|
происходит — обработчик только планирует задачу. Именно это разгружает пул
|
||||||
|
соединений: до правки вызов жил внутри транзакции и держал соединение
|
||||||
|
20–25 секунд, когда egress-сервиса в деплое нет.
|
||||||
|
"""
|
||||||
|
mock_start = AsyncMock(
|
||||||
|
return_value=EgressStartResult(egress_id="EG_bg", started_at=datetime.now(UTC))
|
||||||
|
)
|
||||||
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
|
||||||
|
scheduled: list[tuple[object, dict[str, object]]] = []
|
||||||
|
|
||||||
|
def _schedule(func: object, **kwargs: object) -> None:
|
||||||
|
scheduled.append((func, kwargs))
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
|
user = await _make_user(db_session, "webhook-track-background@example.com")
|
||||||
|
await db_session.commit()
|
||||||
|
|
||||||
|
dispatcher = webhook_handlers_module.WebhookDispatcher(db_session, schedule=_schedule)
|
||||||
|
joined_event = _parse_fixture_event(
|
||||||
|
"participant_joined.json",
|
||||||
|
event_id=f"evt-{uuid.uuid4()}",
|
||||||
|
room_name=conference.slug,
|
||||||
|
identity=str(user.id),
|
||||||
|
)
|
||||||
|
await dispatcher.dispatch(joined_event)
|
||||||
|
|
||||||
|
track_sid = "TR_background"
|
||||||
|
published_event = _parse_fixture_event(
|
||||||
|
"track_published.json",
|
||||||
|
event_id=f"evt-{uuid.uuid4()}",
|
||||||
|
room_name=conference.slug,
|
||||||
|
identity=str(user.id),
|
||||||
|
track_sid=track_sid,
|
||||||
|
)
|
||||||
|
await dispatcher.dispatch(published_event)
|
||||||
|
|
||||||
|
# Сеть не тронута: обработчик только запланировал задачу.
|
||||||
|
mock_start.assert_not_awaited()
|
||||||
|
assert len(scheduled) == 1
|
||||||
|
func, kwargs = scheduled[0]
|
||||||
|
assert func is egress_module.run_track_egress
|
||||||
|
assert kwargs["room_name"] == conference.slug
|
||||||
|
assert kwargs["track_sid"] == track_sid
|
||||||
|
|
||||||
|
session_record = await db_session.scalar(
|
||||||
|
select(ConferenceSession).where(ConferenceSession.conference_id == conference.id)
|
||||||
|
)
|
||||||
|
assert session_record is not None
|
||||||
|
assert kwargs["session_id"] == session_record.id
|
||||||
|
|
||||||
|
# А вот запущенная задача действительно ходит в egress и пишет строку.
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
await egress_module.run_track_egress(**kwargs) # type: ignore[arg-type]
|
||||||
|
mock_start.assert_awaited_once()
|
||||||
|
|
||||||
|
track_row = await db_session.scalar(
|
||||||
|
select(SessionAudioTrack).where(SessionAudioTrack.track_sid == track_sid)
|
||||||
|
)
|
||||||
|
assert track_row is not None
|
||||||
|
assert track_row.egress_id == "EG_bg"
|
||||||
|
|
||||||
|
|
||||||
|
async def test_start_track_egress_gives_up_on_timeout(monkeypatch: pytest.MonkeyPatch) -> None:
|
||||||
|
"""Запуск egress не ждёт дольше `egress_start_timeout_s` (релиз 0.0.12).
|
||||||
|
|
||||||
|
Когда egress-воркера нет, LiveKit держит вызов до собственного таймаута
|
||||||
|
psrpc — на тесте 28.07.2026 это было 20–25 секунд на каждый микрофонный
|
||||||
|
трек. Живой egress отвечает за доли секунды, ждать столько незачем.
|
||||||
|
"""
|
||||||
|
settings = get_settings()
|
||||||
|
monkeypatch.setattr(settings, "egress_start_timeout_s", 0.05, raising=False)
|
||||||
|
|
||||||
|
closed = False
|
||||||
|
|
||||||
|
class _HangingEgress:
|
||||||
|
async def start_track_egress(self, _request: object) -> object:
|
||||||
|
await asyncio.sleep(5)
|
||||||
|
raise AssertionError("вызов должен был прерваться по таймауту")
|
||||||
|
|
||||||
|
class _HangingApi:
|
||||||
|
def __init__(self, *_args: object, **_kwargs: object) -> None:
|
||||||
|
self.egress = _HangingEgress()
|
||||||
|
|
||||||
|
async def aclose(self) -> None:
|
||||||
|
nonlocal closed
|
||||||
|
closed = True
|
||||||
|
|
||||||
|
# Строковая форма: `api` в `services.egress` — реэкспорт из livekit SDK,
|
||||||
|
# обращение к нему атрибутом mypy считает неявным экспортом.
|
||||||
|
monkeypatch.setattr("services.egress.api.LiveKitAPI", _HangingApi)
|
||||||
|
|
||||||
|
with pytest.raises(TimeoutError):
|
||||||
|
await egress_module.start_track_egress("room", "TR_hang", "/recordings/x.ogg")
|
||||||
|
|
||||||
|
# Клиент закрывается и на неуспешном пути — иначе утекали бы соединения.
|
||||||
|
assert closed is True
|
||||||
|
|
||||||
|
|
||||||
async def test_track_published_video_is_noop(
|
async def test_track_published_video_is_noop(
|
||||||
client: httpx.AsyncClient, db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
client: httpx.AsyncClient, db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
||||||
) -> None:
|
) -> None:
|
||||||
"""№9 плана (часть 1): video-трек — no-op, egress не запускается."""
|
"""№9 плана (часть 1): video-трек — no-op, egress не запускается."""
|
||||||
mock_start = AsyncMock()
|
mock_start = AsyncMock()
|
||||||
monkeypatch.setattr(webhook_handlers_module, "start_track_egress", mock_start)
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
user = await _make_user(db_session, "webhook-track-video@example.com")
|
user = await _make_user(db_session, "webhook-track-video@example.com")
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
@@ -462,8 +675,10 @@ async def test_track_published_repeated_webhook_creates_single_row(
|
|||||||
mock_start = AsyncMock(
|
mock_start = AsyncMock(
|
||||||
return_value=EgressStartResult(egress_id="EG_repeat", started_at=datetime.now(UTC))
|
return_value=EgressStartResult(egress_id="EG_repeat", started_at=datetime.now(UTC))
|
||||||
)
|
)
|
||||||
monkeypatch.setattr(webhook_handlers_module, "start_track_egress", mock_start)
|
monkeypatch.setattr(egress_module, "start_track_egress", mock_start)
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
user = await _make_user(db_session, "webhook-track-repeat@example.com")
|
user = await _make_user(db_session, "webhook-track-repeat@example.com")
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
@@ -508,6 +723,8 @@ async def test_egress_ended_finalizes_track_success_and_failure(
|
|||||||
client: httpx.AsyncClient, db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
client: httpx.AsyncClient, db_session: AsyncSession, monkeypatch: pytest.MonkeyPatch
|
||||||
) -> None:
|
) -> None:
|
||||||
"""№10 плана (часть 1): `egress_ended` — 'recorded' на успехе, 'failed' на ошибке."""
|
"""№10 плана (часть 1): `egress_ended` — 'recorded' на успехе, 'failed' на ошибке."""
|
||||||
|
_use_test_session_in_background(monkeypatch, db_session)
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
user = await _make_user(db_session, "webhook-egress-ended@example.com")
|
user = await _make_user(db_session, "webhook-egress-ended@example.com")
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
@@ -527,7 +744,7 @@ async def test_egress_ended_finalizes_track_success_and_failure(
|
|||||||
# Успешная запись.
|
# Успешная запись.
|
||||||
ok_started = datetime.now(UTC)
|
ok_started = datetime.now(UTC)
|
||||||
monkeypatch.setattr(
|
monkeypatch.setattr(
|
||||||
webhook_handlers_module,
|
egress_module,
|
||||||
"start_track_egress",
|
"start_track_egress",
|
||||||
AsyncMock(return_value=EgressStartResult(egress_id="EG_ok", started_at=ok_started)),
|
AsyncMock(return_value=EgressStartResult(egress_id="EG_ok", started_at=ok_started)),
|
||||||
)
|
)
|
||||||
@@ -559,7 +776,7 @@ async def test_egress_ended_finalizes_track_success_and_failure(
|
|||||||
|
|
||||||
# Ошибка записи.
|
# Ошибка записи.
|
||||||
monkeypatch.setattr(
|
monkeypatch.setattr(
|
||||||
webhook_handlers_module,
|
egress_module,
|
||||||
"start_track_egress",
|
"start_track_egress",
|
||||||
AsyncMock(
|
AsyncMock(
|
||||||
return_value=EgressStartResult(egress_id="EG_fail", started_at=datetime.now(UTC))
|
return_value=EgressStartResult(egress_id="EG_fail", started_at=datetime.now(UTC))
|
||||||
@@ -597,6 +814,10 @@ async def test_room_finished_enqueues_pipeline(
|
|||||||
mock_enqueue = Mock()
|
mock_enqueue = Mock()
|
||||||
monkeypatch.setattr(webhook_handlers_module, "enqueue_pipeline", mock_enqueue)
|
monkeypatch.setattr(webhook_handlers_module, "enqueue_pipeline", mock_enqueue)
|
||||||
|
|
||||||
|
# Флаг выставляется явно: `_on_room_finished` ставит задачу в очередь только
|
||||||
|
# при включённой транскрибации, а состояние `instance_settings` в dev-БД
|
||||||
|
# непредсказуемо (тест падал, если в базе оставалось `enabled: false`).
|
||||||
|
await _set_transcriber_enabled(db_session, enabled=True)
|
||||||
conference = await _make_conference(db_session, generate_slug())
|
conference = await _make_conference(db_session, generate_slug())
|
||||||
await db_session.commit()
|
await db_session.commit()
|
||||||
|
|
||||||
|
|||||||
@@ -82,7 +82,12 @@ 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.10}
|
VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.13}
|
||||||
|
# Число процессов uvicorn (см. backend/Dockerfile). Дефолт 2 рассчитан
|
||||||
|
# на 4-ядерный сервер, где ядра делятся с LiveKit. Поднимая значение,
|
||||||
|
# проверьте бюджет соединений с БД: каждый воркер держит свой пул
|
||||||
|
# (DB_POOL_SIZE + DB_MAX_OVERFLOW), а у Postgres есть max_connections.
|
||||||
|
UVICORN_WORKERS: ${UVICORN_WORKERS:-2}
|
||||||
# config/ лежит в корне репозитория и не попадает в образ (контекст сборки —
|
# config/ лежит в корне репозитория и не попадает в образ (контекст сборки —
|
||||||
# только backend/), поэтому plugins.yaml монтируется отдельно.
|
# только backend/), поэтому plugins.yaml монтируется отдельно.
|
||||||
volumes:
|
volumes:
|
||||||
@@ -120,7 +125,13 @@ services:
|
|||||||
context: ../backend
|
context: ../backend
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
command: ["uv", "run", "celery", "-A", "workers.celery_app", "worker", "-B",
|
# `--no-sync` во ВСЕХ вызовах `uv run` в этом файле: окружение собрано на
|
||||||
|
# этапе build образа (`uv sync --frozen --no-dev`, backend/Dockerfile), а
|
||||||
|
# без флага `uv run` синхронизирует venv заново при каждом запуске — и
|
||||||
|
# тянет dev-группу (ruff, mypy, pytest), которой в проде делать нечего.
|
||||||
|
# Для healthcheck'ов это особенно дорого: они дёргаются каждые 15 секунд
|
||||||
|
# всю жизнь контейнера.
|
||||||
|
command: ["uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "worker", "-B",
|
||||||
"-Q", "celery,summarize,notify", "--loglevel=info"]
|
"-Q", "celery,summarize,notify", "--loglevel=info"]
|
||||||
env_file:
|
env_file:
|
||||||
- ../.env
|
- ../.env
|
||||||
@@ -147,7 +158,7 @@ services:
|
|||||||
# нет HTTP-сервера на 8000. Проверяем воркер через `celery ... inspect
|
# нет HTTP-сервера на 8000. Проверяем воркер через `celery ... inspect
|
||||||
# ping`, как рекомендует документация Celery.
|
# ping`, как рекомендует документация Celery.
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "uv", "run", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5"]
|
test: ["CMD", "uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5"]
|
||||||
interval: 15s
|
interval: 15s
|
||||||
timeout: 10s
|
timeout: 10s
|
||||||
retries: 5
|
retries: 5
|
||||||
@@ -181,7 +192,7 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: ../backend
|
context: ../backend
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
entrypoint: ["uv", "run", "python", "/download-model.py"]
|
entrypoint: ["uv", "run", "--no-sync", "python", "/download-model.py"]
|
||||||
environment:
|
environment:
|
||||||
WHISPER_MODEL: ${WHISPER_MODEL:-small}
|
WHISPER_MODEL: ${WHISPER_MODEL:-small}
|
||||||
WHISPER_MODELS_ROOT: /models/whisper
|
WHISPER_MODELS_ROOT: /models/whisper
|
||||||
@@ -216,7 +227,7 @@ services:
|
|||||||
# `worker`, и `celery inspect ping` без `--destination` опросит ВЕСЬ
|
# `worker`, и `celery inspect ping` без `--destination` опросит ВЕСЬ
|
||||||
# кластер — упавший worker-transcriber остался бы "healthy", потому что
|
# кластер — упавший worker-transcriber остался бы "healthy", потому что
|
||||||
# ответил бы базовый worker.
|
# ответил бы базовый worker.
|
||||||
command: ["uv", "run", "celery", "-A", "workers.celery_app", "worker",
|
command: ["uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "worker",
|
||||||
"-Q", "transcription", "--pool=solo", "--concurrency=1",
|
"-Q", "transcription", "--pool=solo", "--concurrency=1",
|
||||||
"--hostname=worker-transcriber@localhost", "--loglevel=info"]
|
"--hostname=worker-transcriber@localhost", "--loglevel=info"]
|
||||||
env_file:
|
env_file:
|
||||||
@@ -247,7 +258,7 @@ services:
|
|||||||
# HTTP-эндпоинта нет — пинг celery, но именно этого узла (см. --hostname
|
# HTTP-эндпоинта нет — пинг celery, но именно этого узла (см. --hostname
|
||||||
# в command выше), а не первого ответившего в общем кластере.
|
# в command выше), а не первого ответившего в общем кластере.
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "uv", "run", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5", "--destination", "worker-transcriber@localhost"]
|
test: ["CMD", "uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5", "--destination", "worker-transcriber@localhost"]
|
||||||
interval: 15s
|
interval: 15s
|
||||||
timeout: 10s
|
timeout: 10s
|
||||||
retries: 5
|
retries: 5
|
||||||
@@ -272,7 +283,7 @@ services:
|
|||||||
args:
|
args:
|
||||||
WITH_GPU_EXTRA: "true"
|
WITH_GPU_EXTRA: "true"
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
command: ["uv", "run", "celery", "-A", "workers.celery_app", "worker",
|
command: ["uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "worker",
|
||||||
"-Q", "transcription", "--pool=solo", "--concurrency=1",
|
"-Q", "transcription", "--pool=solo", "--concurrency=1",
|
||||||
"--hostname=worker-transcriber-gpu@localhost", "--loglevel=info"]
|
"--hostname=worker-transcriber-gpu@localhost", "--loglevel=info"]
|
||||||
env_file:
|
env_file:
|
||||||
@@ -305,7 +316,7 @@ services:
|
|||||||
whisper-model-init:
|
whisper-model-init:
|
||||||
condition: service_completed_successfully
|
condition: service_completed_successfully
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "uv", "run", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5", "--destination", "worker-transcriber-gpu@localhost"]
|
test: ["CMD", "uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "inspect", "ping", "--timeout", "5", "--destination", "worker-transcriber-gpu@localhost"]
|
||||||
interval: 15s
|
interval: 15s
|
||||||
timeout: 10s
|
timeout: 10s
|
||||||
retries: 5
|
retries: 5
|
||||||
@@ -657,6 +668,12 @@ services:
|
|||||||
- ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml:ro
|
- ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml:ro
|
||||||
- ./monitoring/alerts.yml:/etc/prometheus/alerts.yml:ro
|
- ./monitoring/alerts.yml:/etc/prometheus/alerts.yml:ro
|
||||||
- prometheus_data:/prometheus
|
- prometheus_data:/prometheus
|
||||||
|
# node-exporter живёт в host-сети (см. комментарий у него) и по имени
|
||||||
|
# сервиса в docker-сети больше не резолвится. `host-gateway` — штатный
|
||||||
|
# способ дать контейнеру адрес хоста, не завязываясь на конкретный IP
|
||||||
|
# docker-моста.
|
||||||
|
extra_hosts:
|
||||||
|
- "host.docker.internal:host-gateway"
|
||||||
# Loopback-only: админ-доступ по ssh-туннелю, наружу не публикуется.
|
# Loopback-only: админ-доступ по ssh-туннелю, наружу не публикуется.
|
||||||
ports:
|
ports:
|
||||||
- "127.0.0.1:9090:9090"
|
- "127.0.0.1:9090:9090"
|
||||||
@@ -706,13 +723,27 @@ services:
|
|||||||
|
|
||||||
node-exporter:
|
node-exporter:
|
||||||
# Метрики железа хоста (CPU, память, диск, сеть, load average) — то,
|
# Метрики железа хоста (CPU, память, диск, сеть, load average) — то,
|
||||||
# чего нет ни в одном из приложенческих экспортеров выше. Без
|
# чего нет ни в одном из приложенческих экспортеров выше.
|
||||||
# `network_mode: host` (не нужен: читаем /proc,/sys,/ хоста через
|
#
|
||||||
# bind-mount, а Prometheus достаёт их по имени сервиса во внутренней
|
# `network_mode: host` ОБЯЗАТЕЛЕН, и вот почему (проверено 2026-07-28,
|
||||||
# сети compose — так безопаснее, не расширяет сетевой доступ контейнера).
|
# до этого экспортер работал в bridge-сети и отдавал неверные данные).
|
||||||
|
# Bind-mount'а `/proc` достаточно для CPU, памяти и диска, но НЕ для сети:
|
||||||
|
# `/proc/net` — это симлинк на `self/net`, который резолвится в сетевом
|
||||||
|
# namespace ЧИТАЮЩЕГО процесса. В bridge-сети экспортер видел собственные
|
||||||
|
# `lo` и `eth0` (56 МБ трафика) вместо хостового `enp3s0` (39.8 ГБ), то
|
||||||
|
# есть `node_network_*` показывал трафик контейнера, а не сервера. При
|
||||||
|
# разборе нагрузочного теста 28.07 сетевых метрик хоста не оказалось
|
||||||
|
# вовсе — см. .forcc/LOAD-FINDINGS.md.
|
||||||
|
#
|
||||||
|
# Порт 9100 при этом слушается на хосте. Наружу он не торчит: ufw
|
||||||
|
# пропускает только 22/80/443/3478/7881/51820 и UDP-диапазон LiveKit
|
||||||
|
# (проверено `ufw status`). Prometheus обращается к нему через
|
||||||
|
# `host.docker.internal` (см. `extra_hosts` у сервиса prometheus и
|
||||||
|
# таргет `node` в deploy/monitoring/prometheus.yml).
|
||||||
image: prom/node-exporter:v1.8.2
|
image: prom/node-exporter:v1.8.2
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
pid: host
|
pid: host
|
||||||
|
network_mode: host
|
||||||
volumes:
|
volumes:
|
||||||
- /proc:/host/proc:ro
|
- /proc:/host/proc:ro
|
||||||
- /sys:/host/sys:ro
|
- /sys:/host/sys:ro
|
||||||
@@ -722,9 +753,8 @@ services:
|
|||||||
- '--path.sysfs=/host/sys'
|
- '--path.sysfs=/host/sys'
|
||||||
- '--path.rootfs=/rootfs'
|
- '--path.rootfs=/rootfs'
|
||||||
- '--collector.filesystem.mount-points-exclude=^/(sys|proc|dev|host|etc)($$|/)'
|
- '--collector.filesystem.mount-points-exclude=^/(sys|proc|dev|host|etc)($$|/)'
|
||||||
# Не публикуем порт наружу вообще (не 127.0.0.1:9100, а совсем без
|
# Секции `ports` нет и с host-сетью быть не может: контейнер слушает
|
||||||
# ports) — Prometheus ходит к нему по внутренней сети compose
|
# прямо на интерфейсах хоста. От внешнего мира порт закрывает ufw.
|
||||||
# (`node-exporter:9100`), публикация на хост для этого не нужна.
|
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD-SHELL", "wget -q -O- http://127.0.0.1:9100/metrics >/dev/null || exit 1"]
|
test: ["CMD-SHELL", "wget -q -O- http://127.0.0.1:9100/metrics >/dev/null || exit 1"]
|
||||||
interval: 10s
|
interval: 10s
|
||||||
|
|||||||
@@ -38,9 +38,16 @@ scrape_configs:
|
|||||||
# — сервис node-exporter). Единственный источник, который покажет
|
# — сервис node-exporter). Единственный источник, который покажет
|
||||||
# нехватку памяти/CPU на сервере, если она не проявится как рост
|
# нехватку памяти/CPU на сервере, если она не проявится как рост
|
||||||
# латентности API (см. дашборд host.json).
|
# латентности API (см. дашборд host.json).
|
||||||
|
#
|
||||||
|
# Адрес `host.docker.internal`, а не `node-exporter:9100`: с 2026-07-28
|
||||||
|
# экспортер работает в host-сети и по имени сервиса в docker-сети не
|
||||||
|
# резолвится. Причина перевода — сетевые метрики: `/proc/net` это симлинк
|
||||||
|
# на `self/net`, поэтому в bridge-сети экспортер отдавал трафик
|
||||||
|
# собственного `eth0` вместо хостового `enp3s0`. Имя резолвится через
|
||||||
|
# `extra_hosts: host-gateway` у сервиса prometheus (deploy/docker-compose.yml).
|
||||||
- job_name: node
|
- job_name: node
|
||||||
static_configs:
|
static_configs:
|
||||||
- targets: ["node-exporter:9100"]
|
- targets: ["host.docker.internal:9100"]
|
||||||
|
|
||||||
# Метрики по каждому контейнеру (CPU/память/сеть отдельно у backend,
|
# Метрики по каждому контейнеру (CPU/память/сеть отдельно у backend,
|
||||||
# worker, postgres и т.д. — профиль monitoring, сервис
|
# worker, postgres и т.д. — профиль monitoring, сервис
|
||||||
@@ -53,6 +60,32 @@ scrape_configs:
|
|||||||
static_configs:
|
static_configs:
|
||||||
- targets: ["container-exporter:9419"]
|
- targets: ["container-exporter:9419"]
|
||||||
|
|
||||||
|
# LiveKit SFU (профиль `media`). Порт объявлен в самом LiveKit —
|
||||||
|
# `deploy/livekit/livekit.yaml.template`, секция `prometheus: port: 6789`;
|
||||||
|
# наружу он не публикуется, скрейп идёт по имени сервиса внутри docker-сети.
|
||||||
|
#
|
||||||
|
# Почему это важно отдельно от `container-exporter`: тот показывает CPU,
|
||||||
|
# память и суммарный трафик контейнера, но ничего не знает о том, ЧТО внутри
|
||||||
|
# этого трафика. Разбор нагрузочного теста 28.07.2026 пришлось делать по
|
||||||
|
# логам именно потому, что job'а здесь не было (см. .forcc/LOAD-FINDINGS.md).
|
||||||
|
#
|
||||||
|
# Ключевое, что отсюда появляется:
|
||||||
|
# livekit_track_subscribed_total / livekit_track_published_total —
|
||||||
|
# подписки против публикаций, то есть прямой эффект adaptiveStream;
|
||||||
|
# livekit_participant_total, livekit_room_total — нагрузка в участниках;
|
||||||
|
# livekit_quality_score, livekit_packet_loss_percent, livekit_rtt_ms,
|
||||||
|
# livekit_jitter_us, livekit_nack_total, livekit_pli_total — качество
|
||||||
|
# связи у клиентов, а не догадки по событиям congestion в логах;
|
||||||
|
# livekit_webhook_queue_length, livekit_webhook_dispatch_total — очередь
|
||||||
|
# доставки вебхуков в backend (на тесте она росла до 56 секунд).
|
||||||
|
#
|
||||||
|
# Профиль `media` входит в дефолтный набор COMPOSE_PROFILES (см. .env.example),
|
||||||
|
# поэтому job включён, а не закомментирован, как `llm`. На инсталляции без
|
||||||
|
# профиля `media` таргет не резолвится — закомментируйте секцию.
|
||||||
|
- job_name: livekit
|
||||||
|
static_configs:
|
||||||
|
- targets: ["livekit:6789"]
|
||||||
|
|
||||||
# Локальный LLM-сервер (llama.cpp, LLAMA_ARG_ENDPOINT_METRICS=1). Адрес
|
# Локальный LLM-сервер (llama.cpp, LLAMA_ARG_ENDPOINT_METRICS=1). Адрес
|
||||||
# `llm:8080` разрешается ОДНИМ из двух compose-сервисов в зависимости от
|
# `llm:8080` разрешается ОДНИМ из двух compose-сервисов в зависимости от
|
||||||
# выбранного при установке пресета — `llm` (CPU, профиль `llm`, уровни
|
# выбранного при установке пресета — `llm` (CPU, профиль `llm`, уровни
|
||||||
|
|||||||
@@ -85,6 +85,17 @@ ufw allow 54000:54100/udp # LiveKit WebRTC media (ICE), см. docker-compose.y
|
|||||||
# TURN (coturn) — только если включаете раздел 8:
|
# TURN (coturn) — только если включаете раздел 8:
|
||||||
# ufw allow 3478/tcp
|
# ufw allow 3478/tcp
|
||||||
# ufw allow 3478/udp
|
# ufw allow 3478/udp
|
||||||
|
|
||||||
|
# Мониторинг (профиль `monitoring`): node-exporter работает в host-сети —
|
||||||
|
# иначе он отдаёт сетевые метрики собственного контейнера вместо метрик
|
||||||
|
# сервера (`/proc/net` — симлинк на `self/net`, bind-mount `/proc` этого не
|
||||||
|
# обходит; см. комментарий у сервиса в deploy/docker-compose.yml). Порт
|
||||||
|
# слушается на хосте, поэтому Prometheus в docker-сети упирается в
|
||||||
|
# политику ufw по умолчанию. Правило разрешает скрейп ТОЛЬКО из внутренних
|
||||||
|
# docker-подсетей — снаружи 9100 остаётся закрыт (172.16.0.0/12 не
|
||||||
|
# маршрутизируется в интернете):
|
||||||
|
ufw allow from 172.16.0.0/12 to any port 9100 proto tcp comment 'node-exporter: скрейп Prometheus из docker-сети'
|
||||||
|
|
||||||
ufw enable
|
ufw enable
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -389,7 +400,7 @@ docker exec vidconf-postgres-1 pg_dump -U vidconf vidconf | gzip > db-$(date +%F
|
|||||||
```bash
|
```bash
|
||||||
gunzip -c db-2026-07-25.sql.gz | docker exec -i vidconf-postgres-1 psql -U vidconf vidconf
|
gunzip -c db-2026-07-25.sql.gz | docker exec -i vidconf-postgres-1 psql -U vidconf vidconf
|
||||||
# Догнать миграции, если бэкап снят на более старой версии кода:
|
# Догнать миграции, если бэкап снят на более старой версии кода:
|
||||||
docker compose -f deploy/docker-compose.yml --env-file .env run --rm backend uv run alembic upgrade head
|
docker compose -f deploy/docker-compose.yml --env-file .env run --rm backend uv run --no-sync alembic upgrade head
|
||||||
docker compose -f deploy/docker-compose.yml --env-file .env restart backend worker
|
docker compose -f deploy/docker-compose.yml --env-file .env restart backend worker
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ CPU-only — отдельного GPU-варианта профилей для
|
|||||||
|
|
||||||
Поведение:
|
Поведение:
|
||||||
- **Дефолт (Enter):** применяет матрицу выбранного пресета к настройкам БД
|
- **Дефолт (Enter):** применяет матрицу выбранного пресета к настройкам БД
|
||||||
(defs: `docker compose exec -T backend uv run python -m scripts.apply_preset_settings --force`)
|
(defs: `docker compose exec -T backend uv run --no-sync python -m scripts.apply_preset_settings --force`)
|
||||||
- **Отказ (`n`):** сохраняет ручные правки админа; переменные `BOOTSTRAP_*` в `.env`
|
- **Отказ (`n`):** сохраняет ручные правки админа; переменные `BOOTSTRAP_*` в `.env`
|
||||||
обновляются, но скрипт применения настроек НЕ запускается
|
обновляются, но скрипт применения настроек НЕ запускается
|
||||||
- **Флаг `--yes`:** автоматически применяет пресет без вопроса (для CI/CD)
|
- **Флаг `--yes`:** автоматически применяет пресет без вопроса (для CI/CD)
|
||||||
@@ -111,7 +111,7 @@ Grafana/Prometheus не поднимаются автоматически — с
|
|||||||
собирает фронтенд-SPA и вкомпилирует статику, `frontend/Dockerfile`).
|
собирает фронтенд-SPA и вкомпилирует статику, `frontend/Dockerfile`).
|
||||||
4. Поднимает `postgres`/`redis` (`up -d --wait`) и применяет **до старта
|
4. Поднимает `postgres`/`redis` (`up -d --wait`) и применяет **до старта
|
||||||
backend** миграции и seed одноразовыми контейнерами:
|
backend** миграции и seed одноразовыми контейнерами:
|
||||||
`docker compose run --rm backend uv run alembic upgrade head` +
|
`docker compose run --rm backend uv run --no-sync alembic upgrade head` +
|
||||||
`... python -m scripts.seed`. Порядок критичен: `backend.lifespan`
|
`... python -m scripts.seed`. Порядок критичен: `backend.lifespan`
|
||||||
бутстрапит `instance_settings` при каждом старте приложения, поэтому на
|
бутстрапит `instance_settings` при каждом старте приложения, поэтому на
|
||||||
чистой БД таблицы обязаны существовать до первого запуска backend — иначе
|
чистой БД таблицы обязаны существовать до первого запуска backend — иначе
|
||||||
@@ -122,9 +122,8 @@ Grafana/Prometheus не поднимаются автоматически — с
|
|||||||
настройки инстанса не перетираются).
|
настройки инстанса не перетираются).
|
||||||
5. Поднимает остальной стек: `docker compose <--profile ...> up -d --wait`
|
5. Поднимает остальной стек: `docker compose <--profile ...> up -d --wait`
|
||||||
(backend, worker, nginx с фронтом + сервисы активных профилей). Команда
|
(backend, worker, nginx с фронтом + сервисы активных профилей). Команда
|
||||||
идемпотентна и обёрнута в ретрай (до 3 попыток): первый старт backend/worker
|
идемпотентна и обёрнута в ретрай (до 3 попыток): на слабой/загруженной
|
||||||
включает `uv run` (синхронизация окружения + компиляция байткода), и на
|
машине healthcheck может не успеть за отведённые
|
||||||
слабой/загруженной машине healthcheck может не успеть за отведённые
|
|
||||||
retries — повтор лишь дожидается уже стартующих контейнеров.
|
retries — повтор лишь дожидается уже стартующих контейнеров.
|
||||||
6. Печатает сводку: URL фронтенда/бэкенда, учётные данные администратора,
|
6. Печатает сводку: URL фронтенда/бэкенда, учётные данные администратора,
|
||||||
команда для `--profile monitoring`.
|
команда для `--profile monitoring`.
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ services:
|
|||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
# Без -B: beat уже запущен на базовом worker (см. правило выше).
|
# Без -B: beat уже запущен на базовом worker (см. правило выше).
|
||||||
command: ["uv", "run", "celery", "-A", "workers.celery_app", "worker",
|
command: ["uv", "run", "--no-sync", "celery", "-A", "workers.celery_app", "worker",
|
||||||
"-Q", "summarize", "--hostname=worker-summarize-%h@%h", "--loglevel=info"]
|
"-Q", "summarize", "--hostname=worker-summarize-%h@%h", "--loglevel=info"]
|
||||||
env_file:
|
env_file:
|
||||||
- ../.env
|
- ../.env
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
import { useEffect, useRef, useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
import { X } from 'lucide-react'
|
import { X } from 'lucide-react'
|
||||||
import { useMediaDeviceSelect, usePersistentUserChoices } from '@livekit/components-react'
|
import { useMediaDeviceSelect, usePersistentUserChoices } from '@livekit/components-react'
|
||||||
import { useToast } from '@/components/ui/ToastProvider'
|
import { useToast } from '@/components/ui/ToastProvider'
|
||||||
|
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
|
||||||
import { useModalDismiss } from '@/hooks/useModalDismiss'
|
import { useModalDismiss } from '@/hooks/useModalDismiss'
|
||||||
|
import { StageViewOptions, type StageViewProps } from '@/components/room/StageViewOptions'
|
||||||
import { isAudioOutputSelectable, saveAudioOutputDeviceId } from '@/lib/audioOutputDevice'
|
import { isAudioOutputSelectable, saveAudioOutputDeviceId } from '@/lib/audioOutputDevice'
|
||||||
|
|
||||||
interface DeviceSettingsDialogProps {
|
interface DeviceSettingsDialogProps extends StageViewProps {
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Совпадает с мобильным брейкпоинтом комнаты (`room.css`, `max-width: 600px`) — ниже него панель рендерится шторкой снизу вместо модалки. */
|
|
||||||
const COMPACT_VIEWPORT_QUERY = '(max-width: 600px)'
|
|
||||||
/** Свайп ручки шторки вниз дальше этого порога (px) закрывает панель, меньше — она возвращается на место. */
|
/** Свайп ручки шторки вниз дальше этого порога (px) закрывает панель, меньше — она возвращается на место. */
|
||||||
const SHEET_DISMISS_THRESHOLD_PX = 80
|
const SHEET_DISMISS_THRESHOLD_PX = 80
|
||||||
|
|
||||||
@@ -19,20 +19,6 @@ function deviceLabel(device: MediaDeviceInfo, index: number, fallback: string):
|
|||||||
return device.label || `${fallback} ${index + 1}`
|
return device.label || `${fallback} ${index + 1}`
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Живое отслеживание мобильной ширины — та же схема, что системная тема в `useTheme.ts` (matchMedia + change-листенер). */
|
|
||||||
function useIsCompactViewport(): boolean {
|
|
||||||
const [isCompact, setIsCompact] = useState(() => window.matchMedia(COMPACT_VIEWPORT_QUERY).matches)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const media = window.matchMedia(COMPACT_VIEWPORT_QUERY)
|
|
||||||
const handleChange = (event: MediaQueryListEvent) => setIsCompact(event.matches)
|
|
||||||
media.addEventListener('change', handleChange)
|
|
||||||
return () => media.removeEventListener('change', handleChange)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return isCompact
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Панель «Настройки устройств» — три селекта на хуках `@livekit/components-react`:
|
* Панель «Настройки устройств» — три селекта на хуках `@livekit/components-react`:
|
||||||
* список устройств и переключение целиком в `useMediaDeviceSelect` (сама
|
* список устройств и переключение целиком в `useMediaDeviceSelect` (сама
|
||||||
@@ -47,12 +33,23 @@ function useIsCompactViewport(): boolean {
|
|||||||
* модалки — по клику вне, Escape (`useModalDismiss`) и свайпу вниз за ручку.
|
* модалки — по клику вне, Escape (`useModalDismiss`) и свайпу вниз за ручку.
|
||||||
* Десктоп не меняется.
|
* Десктоп не меняется.
|
||||||
*
|
*
|
||||||
|
* Там же, и только там, первой секцией идёт «Вид» (режим показа участников и
|
||||||
|
* скрытие остальных): на мобильном тулбар ужат до пяти кнопок, отдельной
|
||||||
|
* кнопки «Вид» там нет — см. `RoomToolbar`. Поэтому и заголовок панели на
|
||||||
|
* мобильном шире по смыслу («Настройки», а не «Настройки устройств»).
|
||||||
|
*
|
||||||
* ДОЛЖЕН рендериться внутри `<LiveKitRoom>`: `useMediaDeviceSelect` без явно
|
* ДОЛЖЕН рендериться внутри `<LiveKitRoom>`: `useMediaDeviceSelect` без явно
|
||||||
* переданного `room` берёт активную комнату из `RoomContext` — вне контекста
|
* переданного `room` берёт активную комнату из `RoomContext` — вне контекста
|
||||||
* он создал бы отдельный, ни с чем не связанный `Room()` и переключал бы
|
* он создал бы отдельный, ни с чем не связанный `Room()` и переключал бы
|
||||||
* устройство «в никуда».
|
* устройство «в никуда».
|
||||||
*/
|
*/
|
||||||
export function DeviceSettingsDialog({ onClose }: DeviceSettingsDialogProps) {
|
export function DeviceSettingsDialog({
|
||||||
|
onClose,
|
||||||
|
layoutMode,
|
||||||
|
onLayoutModeChange,
|
||||||
|
hideOthers,
|
||||||
|
onHideOthersChange,
|
||||||
|
}: DeviceSettingsDialogProps) {
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
const { saveAudioInputDeviceId, saveVideoInputDeviceId } = usePersistentUserChoices()
|
const { saveAudioInputDeviceId, saveVideoInputDeviceId } = usePersistentUserChoices()
|
||||||
const mic = useMediaDeviceSelect({ kind: 'audioinput' })
|
const mic = useMediaDeviceSelect({ kind: 'audioinput' })
|
||||||
@@ -143,12 +140,26 @@ export function DeviceSettingsDialog({ onClose }: DeviceSettingsDialogProps) {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="room-modal-head">
|
<div className="room-modal-head">
|
||||||
<h2 id="device-settings-title">Настройки устройств</h2>
|
<h2 id="device-settings-title">{isCompact ? 'Настройки' : 'Настройки устройств'}</h2>
|
||||||
<button type="button" className="room-modal-close" aria-label="Закрыть" onClick={onClose}>
|
<button type="button" className="room-modal-close" aria-label="Закрыть" onClick={onClose}>
|
||||||
<X className="lucide" style={{ width: 16, height: 16 }} aria-hidden="true" />
|
<X className="lucide" style={{ width: 16, height: 16 }} aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Обёртка НЕ `.room-field`: там `label { display: block }` со
|
||||||
|
специфичностью выше, чем у `.stage-view-mode` — пункты режимов
|
||||||
|
рассыпались бы в столбик (кружок отдельно, текст под ним). */}
|
||||||
|
{isCompact && (
|
||||||
|
<div className="stage-view-section">
|
||||||
|
<StageViewOptions
|
||||||
|
layoutMode={layoutMode}
|
||||||
|
onLayoutModeChange={onLayoutModeChange}
|
||||||
|
hideOthers={hideOthers}
|
||||||
|
onHideOthersChange={onHideOthersChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="room-field">
|
<div className="room-field">
|
||||||
<label htmlFor="device-settings-mic">Микрофон</label>
|
<label htmlFor="device-settings-mic">Микрофон</label>
|
||||||
<select
|
<select
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState, type ReactNode } from 'react'
|
||||||
|
import { EyeOff, Users } from 'lucide-react'
|
||||||
import { Track, type Participant } from 'livekit-client'
|
import { Track, type Participant } from 'livekit-client'
|
||||||
import {
|
import {
|
||||||
CarouselLayout,
|
CarouselLayout,
|
||||||
FocusLayoutContainer,
|
FocusLayoutContainer,
|
||||||
GridLayout,
|
|
||||||
RoomAudioRenderer,
|
RoomAudioRenderer,
|
||||||
isTrackReference,
|
isTrackReference,
|
||||||
useRoomContext,
|
useRoomContext,
|
||||||
@@ -12,7 +12,10 @@ import {
|
|||||||
type TrackReferenceOrPlaceholder,
|
type TrackReferenceOrPlaceholder,
|
||||||
} 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 { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
|
||||||
import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus'
|
import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus'
|
||||||
|
import type { StageLayoutMode } from '@/lib/stageLayoutMode'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Стабильная (модульная, не пересоздаётся на каждый рендер) ссылка на
|
* Стабильная (модульная, не пересоздаётся на каждый рендер) ссылка на
|
||||||
@@ -80,10 +83,57 @@ function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant
|
|||||||
return holdMs <= 0 ? speakers : steady
|
return holdMs <= 0 ? speakers : steady
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Есть ли у трека ЖИВОЕ видео: это настоящий трек (не плейсхолдер выключенной
|
||||||
|
* камеры) и он не в мьюте. По этому признаку режим «Живые плитки» делит
|
||||||
|
* участников на сетку и карусель, а `pickStageFocus` отдаёт предпочтение
|
||||||
|
* говорящему с картинкой.
|
||||||
|
*/
|
||||||
|
function hasLiveVideo(track: TrackReferenceOrPlaceholder): boolean {
|
||||||
|
return isTrackReference(track) && !track.publication.isMuted
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Основная сцена конференции: превью остальных участников + крупная плитка
|
* Основная сцена конференции: превью остальных участников + крупная плитка
|
||||||
* активного спикера (FocusLayoutContainer + CarouselLayout при нескольких
|
* активного спикера (FocusLayoutContainer + CarouselLayout при нескольких
|
||||||
* участниках, GridLayout при одном/двух).
|
* участниках, равномерная сетка при одном/двух).
|
||||||
|
*
|
||||||
|
* РЕЖИМЫ ПОКАЗА (`layoutMode`, выбор пользователя, см. `lib/stageLayoutMode.ts`):
|
||||||
|
* - `standard` — как было до 0.0.11: крупная плитка (кого показать, решает
|
||||||
|
* `pickStageFocus`) + карусель остальных сбоку;
|
||||||
|
* - `tiles` — все участники равными плитками (`StageGrid`), без фокуса;
|
||||||
|
* - `live-tiles` — сетка только из участников с включённой камерой,
|
||||||
|
* остальные (плейсхолдер/мьют, см. `hasLiveVideo`) — в карусели сбоку.
|
||||||
|
* Если камеру не включил никто, сетка была бы пустой, поэтому в этом
|
||||||
|
* случае показываем всех — режим вырождается в `tiles`.
|
||||||
|
*
|
||||||
|
* ДЕМОНСТРАЦИЯ ЭКРАНА перебивает выбранный режим: пока в комнате есть хоть
|
||||||
|
* одна активная демонстрация, сцена ведёт себя как `standard` (демонстрация
|
||||||
|
* крупно, все камеры в карусели). Это сознательно: смысл плиточных режимов —
|
||||||
|
* равноправие участников, а демонстрация по определению неравноправна, ради
|
||||||
|
* неё её и включают. Режим при этом не меняется — он живёт в состоянии
|
||||||
|
* `RoomPage`, поэтому по завершении демонстрации сцена сама возвращается к
|
||||||
|
* выбранному пользователем виду.
|
||||||
|
*
|
||||||
|
* СКРЫТИЕ ОСТАЛЬНЫХ (`hideOthers`): карусель не рендерится вовсе, основная
|
||||||
|
* область занимает всю сцену. Скрыть можно тремя способами — меню «Вид»,
|
||||||
|
* шторка настроек на мобильном и кнопка «Скрыть» прямо над колонкой миниатюр
|
||||||
|
* (`onHideOthers`, только широкий экран). Вернуть — кнопкой «Показать
|
||||||
|
* остальных» на сцене (`onShowOthers`): она видна всегда, пока кто-то скрыт,
|
||||||
|
* чтобы участники не «потерялись» без понятного способа их вернуть. В режиме
|
||||||
|
* `tiles` скрывать нечего (карусели нет), переключатель там заблокирован —
|
||||||
|
* см. `StageViewOptions`.
|
||||||
|
*
|
||||||
|
* ФОКУС ПЕРЕЖИВАЕТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере — ОТДЕЛЬНЫЙ
|
||||||
|
* экземпляр этого компонента (портал в PiP-окно), и своё состояние фокуса он
|
||||||
|
* начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и
|
||||||
|
* `pickStageFocus` доходил до последнего фолбэка `localKey`, то есть мини-окно
|
||||||
|
* открывалось на самом пользователе вместо того, что он видел крупно. В Safari
|
||||||
|
* бага не было видно: там Document PiP не используется, а video-фолбэк
|
||||||
|
* (`useRoomPiP`) берёт `<video>` прямо из фокус-плитки основного окна. Лечится
|
||||||
|
* передачей ключа наружу и обратно: `onFocusKeyChange` → состояние в
|
||||||
|
* `RoomPage` → `initialFocusKey` следующего экземпляра. Работает в обе стороны
|
||||||
|
* — возврат из мини-плеера тоже не сбрасывает фокус.
|
||||||
*
|
*
|
||||||
* Раскладка — вертикальная колонка миниатюр слева от основной сцены (не
|
* Раскладка — вертикальная колонка миниатюр слева от основной сцены (не
|
||||||
* горизонтальная лента, см. design/mockups/room.html после правки: узкая
|
* горизонтальная лента, см. design/mockups/room.html после правки: узкая
|
||||||
@@ -111,7 +161,8 @@ function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant
|
|||||||
*
|
*
|
||||||
* Проп `variant="pip"` — для рендера
|
* Проп `variant="pip"` — для рендера
|
||||||
* ВНУТРИ мини-плеера (Document PiP, портал в `RoomPage.tsx`). В этом режиме
|
* ВНУТРИ мини-плеера (Document PiP, портал в `RoomPage.tsx`). В этом режиме
|
||||||
* показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида.
|
* показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида;
|
||||||
|
* режимы показа и скрытие остальных на мини-плеер не влияют вовсе.
|
||||||
*
|
*
|
||||||
* Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у
|
* Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у
|
||||||
* `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному:
|
* `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному:
|
||||||
@@ -120,8 +171,31 @@ function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant
|
|||||||
* фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление
|
* фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление
|
||||||
* участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке.
|
* участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке.
|
||||||
*/
|
*/
|
||||||
export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
|
export function RoomStage({
|
||||||
|
variant = 'full',
|
||||||
|
layoutMode = 'standard',
|
||||||
|
hideOthers = false,
|
||||||
|
onShowOthers,
|
||||||
|
onHideOthers,
|
||||||
|
initialFocusKey = null,
|
||||||
|
onFocusKeyChange,
|
||||||
|
}: {
|
||||||
|
variant?: 'full' | 'pip'
|
||||||
|
/** Выбранный пользователем режим показа; игнорируется при `variant="pip"`. */
|
||||||
|
layoutMode?: StageLayoutMode
|
||||||
|
/** Скрыть карусель остальных участников; игнорируется при `variant="pip"`. */
|
||||||
|
hideOthers?: boolean
|
||||||
|
/** Вернуть скрытых участников — кнопка на сцене (см. докстринг выше). */
|
||||||
|
onShowOthers?: () => void
|
||||||
|
/** Скрыть остальных — кнопка над каруселью (только широкий экран). */
|
||||||
|
onHideOthers?: () => void
|
||||||
|
/** Чем инициализировать фокус при монтировании — см. докстринг про мини-плеер. */
|
||||||
|
initialFocusKey?: string | null
|
||||||
|
/** Сообщать наружу текущий фокус, чтобы его пережил переезд сцены в мини-плеер и обратно. */
|
||||||
|
onFocusKeyChange?: (key: string | null) => void
|
||||||
|
}) {
|
||||||
const room = useRoomContext()
|
const room = useRoomContext()
|
||||||
|
const isCompact = useIsCompactViewport()
|
||||||
const tracks = useTracks(STAGE_TRACK_SOURCES, {
|
const tracks = useTracks(STAGE_TRACK_SOURCES, {
|
||||||
onlySubscribed: false,
|
onlySubscribed: false,
|
||||||
})
|
})
|
||||||
@@ -167,7 +241,10 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
|
|||||||
// `pickStageFocus` меняют результат без изменения самих треков.
|
// `pickStageFocus` меняют результат без изменения самих треков.
|
||||||
const [prevTracks, setPrevTracks] = useState(tracks)
|
const [prevTracks, setPrevTracks] = useState(tracks)
|
||||||
const [prevSpeakingParticipants, setPrevSpeakingParticipants] = useState(speakingParticipants)
|
const [prevSpeakingParticipants, setPrevSpeakingParticipants] = useState(speakingParticipants)
|
||||||
const [focusKey, setFocusKey] = useState<string | null>(null)
|
// Стартовое значение — фокус, доставшийся от предыдущего экземпляра сцены
|
||||||
|
// (см. `initialFocusKey` и докстринг про мини-плеер). Дальше живёт своей
|
||||||
|
// жизнью: `pickStageFocus` пересчитывает его на каждое значимое изменение.
|
||||||
|
const [focusKey, setFocusKey] = useState<string | null>(initialFocusKey)
|
||||||
// Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
|
// Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
|
||||||
// плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
|
// плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
|
||||||
// Только для основного окна — в PiP плитка одна и закреплять нечего.
|
// Только для основного окна — в PiP плитка одна и закреплять нечего.
|
||||||
@@ -211,10 +288,7 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
|
|||||||
speakingCameraKeys,
|
speakingCameraKeys,
|
||||||
// Приоритет «говорящий с камерой выше говорящего без камеры» — только
|
// Приоритет «говорящий с камерой выше говорящего без камеры» — только
|
||||||
// основному окну: PiP по договорённости ведёт себя ровно как раньше.
|
// основному окну: PiP по договорённости ведёт себя ровно как раньше.
|
||||||
cameraKeysWithVideo:
|
cameraKeysWithVideo: variant === 'pip' ? [] : cameraTracks.filter(hasLiveVideo).map(stageTrackKey),
|
||||||
variant === 'pip'
|
|
||||||
? []
|
|
||||||
: cameraTracks.filter((t) => isTrackReference(t) && !t.publication.isMuted).map(stageTrackKey),
|
|
||||||
prevKeys,
|
prevKeys,
|
||||||
prevFocusKey: focusKey,
|
prevFocusKey: focusKey,
|
||||||
pinnedKey: pinnedAlive ? pinnedKey : null,
|
pinnedKey: pinnedAlive ? pinnedKey : null,
|
||||||
@@ -228,6 +302,14 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Отдаём фокус наружу (в `RoomPage`), чтобы он пережил размонтирование этой
|
||||||
|
// сцены и достался следующей — см. `initialFocusKey`. Именно эффект, а не
|
||||||
|
// вызов в теле рендера: setState ЧУЖОГО компонента во время рендера React
|
||||||
|
// запрещает.
|
||||||
|
useEffect(() => {
|
||||||
|
onFocusKeyChange?.(focusKey)
|
||||||
|
}, [focusKey, onFocusKeyChange])
|
||||||
|
|
||||||
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
|
||||||
// При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И
|
// При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И
|
||||||
@@ -273,29 +355,94 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Демонстрация экрана перебивает выбранный режим (обоснование — в докстринге).
|
||||||
|
const effectiveMode: StageLayoutMode = hasScreenShare ? 'standard' : layoutMode
|
||||||
|
const liveCameraTracks = cameraTracks.filter(hasLiveVideo)
|
||||||
|
|
||||||
|
// Кого показываем сбоку в карусели. В «плитках» — никого (все равноправны),
|
||||||
|
// в «живых плитках» — тех, у кого камера выключена (а если камеры нет ни у
|
||||||
|
// кого, карусель пуста: все ушли в сетку), в «стандарте» — всех, кроме
|
||||||
|
// плитки в фокусе.
|
||||||
|
const sideTracks: TrackReferenceOrPlaceholder[] =
|
||||||
|
effectiveMode === 'tiles'
|
||||||
|
? []
|
||||||
|
: effectiveMode === 'live-tiles'
|
||||||
|
? liveCameraTracks.length > 0
|
||||||
|
? cameraTracks.filter((t) => !hasLiveVideo(t))
|
||||||
|
: []
|
||||||
|
: carouselTracks
|
||||||
|
const showCarousel = !hideOthers && sideTracks.length > 0
|
||||||
|
// Закрепление имеет смысл только там, где есть «крупная плитка» —
|
||||||
|
// в плиточных режимах фокуса нет, поэтому и булавки на плитках нет.
|
||||||
|
const pinProps =
|
||||||
|
effectiveMode === 'standard' ? { pinnedKey, onTogglePin: handleTogglePin } : {}
|
||||||
|
|
||||||
|
function renderMain(): ReactNode {
|
||||||
|
if (effectiveMode === 'tiles') {
|
||||||
|
return (
|
||||||
|
<StageGrid tracks={tracks}>
|
||||||
|
<RoomParticipantTile />
|
||||||
|
</StageGrid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (effectiveMode === 'live-tiles') {
|
||||||
|
return (
|
||||||
|
<StageGrid tracks={liveCameraTracks.length > 0 ? liveCameraTracks : cameraTracks}>
|
||||||
|
<RoomParticipantTile />
|
||||||
|
</StageGrid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
// «Стандарт» с единственным участником (карусель пуста и скрывать нечего) —
|
||||||
|
// прежнее поведение: равномерная сетка на всю сцену, а не фокус-плитка.
|
||||||
|
if (sideTracks.length === 0 && !hideOthers) {
|
||||||
|
return (
|
||||||
|
<StageGrid tracks={tracks}>
|
||||||
|
<RoomParticipantTile {...pinProps} />
|
||||||
|
</StageGrid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
// FocusLayout оригинала — лёгкая обёртка ровно над ParticipantTile
|
||||||
|
// (см. её исходник), поэтому вместо неё используем свою обёртку
|
||||||
|
// напрямую с тем же trackRef (аватар в фокус-плитке).
|
||||||
|
return (
|
||||||
|
focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} {...pinProps} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="stage">
|
<section className="stage">
|
||||||
{!hasScreenShare && (!focusTrack || carouselTracks.length === 0) ? (
|
{showCarousel ? (
|
||||||
<GridLayout tracks={tracks} className="stage-tiles">
|
|
||||||
<RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
|
|
||||||
</GridLayout>
|
|
||||||
) : (
|
|
||||||
<FocusLayoutContainer className="stage-tiles">
|
<FocusLayoutContainer className="stage-tiles">
|
||||||
<CarouselLayout tracks={carouselTracks}>
|
{/* Обёртка колонки миниатюр: сама карусель не может быть прямым
|
||||||
<RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
|
ребёнком грида, потому что над ней стоит кнопка «Скрыть». Из-за
|
||||||
</CarouselLayout>
|
этого мобильный `.lk-carousel{order:1}` библиотеки перестаёт
|
||||||
{/* FocusLayout оригинала — лёгкая обёртка ровно над ParticipantTile
|
действовать — порядок переносим на `.stage-side` (см. room.css). */}
|
||||||
(см. её исходник), поэтому вместо неё используем свою обёртку
|
<div className="stage-side">
|
||||||
напрямую с тем же trackRef (аватар в фокус-плитке). */}
|
{/* Быстрый способ убрать карусель, не открывая меню «Вид». Только
|
||||||
{focusTrack && (
|
на широком экране: на мобильном колонка превращается в узкую
|
||||||
<RoomParticipantTile
|
полосу снизу, где кнопке не место, — там переключатель живёт в
|
||||||
trackRef={focusTrack}
|
шторке настроек. Вернуть участников можно кнопкой на сцене. */}
|
||||||
onStopSharing={handleStopSharing}
|
{!isCompact && onHideOthers && (
|
||||||
pinnedKey={pinnedKey}
|
<button type="button" className="stage-side-hide" onClick={onHideOthers}>
|
||||||
onTogglePin={handleTogglePin}
|
<EyeOff className="lucide" aria-hidden="true" />
|
||||||
/>
|
<span>Скрыть</span>
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
|
<CarouselLayout tracks={sideTracks}>
|
||||||
|
<RoomParticipantTile {...pinProps} />
|
||||||
|
</CarouselLayout>
|
||||||
|
</div>
|
||||||
|
{renderMain()}
|
||||||
</FocusLayoutContainer>
|
</FocusLayoutContainer>
|
||||||
|
) : (
|
||||||
|
// Карусели нет — основная область занимает сцену целиком.
|
||||||
|
<div className="stage-tiles stage-main-only">{renderMain()}</div>
|
||||||
|
)}
|
||||||
|
{hideOthers && sideTracks.length > 0 && (
|
||||||
|
<button type="button" className="stage-show-others" onClick={onShowOthers}>
|
||||||
|
<Users className="lucide" aria-hidden="true" />
|
||||||
|
<span>Показать остальных ({sideTracks.length})</span>
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
<RoomAudioRenderer />
|
<RoomAudioRenderer />
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -15,6 +15,8 @@ import {
|
|||||||
import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
|
import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
|
||||||
import { DisconnectButton, useTrackToggle } from '@livekit/components-react'
|
import { DisconnectButton, useTrackToggle } from '@livekit/components-react'
|
||||||
import { useToast } from '@/components/ui/ToastProvider'
|
import { useToast } from '@/components/ui/ToastProvider'
|
||||||
|
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
|
||||||
|
import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Опции захвата демонстрации экрана: `audio: true` — звук
|
* Опции захвата демонстрации экрана: `audio: true` — звук
|
||||||
@@ -36,7 +38,7 @@ const SCREEN_SHARE_CAPTURE_OPTIONS: ScreenShareCaptureOptions = {
|
|||||||
systemAudio: 'include',
|
systemAudio: 'include',
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RoomToolbarProps {
|
interface RoomToolbarProps extends StageViewProps {
|
||||||
/** Показывать ли кнопку чата — `JoinOut.chat_enabled` И чат не помечен недоступным (close-код 4404). */
|
/** Показывать ли кнопку чата — `JoinOut.chat_enabled` И чат не помечен недоступным (close-код 4404). */
|
||||||
chatVisible: boolean
|
chatVisible: boolean
|
||||||
chatOpen: boolean
|
chatOpen: boolean
|
||||||
@@ -56,10 +58,15 @@ interface RoomToolbarProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Нижний тулбар комнаты: микрофон/камера/демонстрация экрана/
|
* Нижний тулбар комнаты: микрофон/камера/демонстрация экрана/вид сцены/
|
||||||
* настройки устройств/полноэкранный режим/мини-плеер/чат/выход — собственные
|
* настройки устройств/полноэкранный режим/мини-плеер/чат/выход — собственные
|
||||||
* кнопки на хуках LiveKit (useTrackToggle/DisconnectButton) и панели чата,
|
* кнопки на хуках LiveKit (useTrackToggle/DisconnectButton) и панели чата,
|
||||||
* стилизованные по design/mockups/room.html.
|
* стилизованные по design/mockups/room.html.
|
||||||
|
*
|
||||||
|
* Кнопка «Вид» (режимы показа и скрытие остальных) рендерится ТОЛЬКО на
|
||||||
|
* широком экране — условным рендерингом, а не скрытием через CSS: тулбар на
|
||||||
|
* мобильном и так ужат до пяти кнопок, а те же настройки там доступны секцией
|
||||||
|
* «Вид» в шторке настроек (`DeviceSettingsDialog`).
|
||||||
*/
|
*/
|
||||||
export function RoomToolbar({
|
export function RoomToolbar({
|
||||||
chatVisible,
|
chatVisible,
|
||||||
@@ -73,8 +80,13 @@ export function RoomToolbar({
|
|||||||
pipSupported,
|
pipSupported,
|
||||||
pipActive,
|
pipActive,
|
||||||
onTogglePiP,
|
onTogglePiP,
|
||||||
|
layoutMode,
|
||||||
|
onLayoutModeChange,
|
||||||
|
hideOthers,
|
||||||
|
onHideOthersChange,
|
||||||
}: RoomToolbarProps) {
|
}: RoomToolbarProps) {
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
|
const isCompact = useIsCompactViewport()
|
||||||
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({
|
||||||
@@ -140,6 +152,15 @@ export function RoomToolbar({
|
|||||||
<span className="label">Демонстрация</span>
|
<span className="label">Демонстрация</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{!isCompact && (
|
||||||
|
<StageViewMenu
|
||||||
|
layoutMode={layoutMode}
|
||||||
|
onLayoutModeChange={onLayoutModeChange}
|
||||||
|
hideOthers={hideOthers}
|
||||||
|
onHideOthersChange={onHideOthersChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="tb-btn"
|
className="tb-btn"
|
||||||
|
|||||||
113
frontend/src/components/room/StageGrid.tsx
Normal file
113
frontend/src/components/room/StageGrid.tsx
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
import { useRef, type ReactNode, type RefObject } from 'react'
|
||||||
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
|
import {
|
||||||
|
TrackLoop,
|
||||||
|
useGridLayout,
|
||||||
|
usePagination,
|
||||||
|
useSwipe,
|
||||||
|
type GridLayoutDefinition,
|
||||||
|
type TrackReferenceOrPlaceholder,
|
||||||
|
} from '@livekit/components-react'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Раскладки равномерной сетки — расширенный набор поверх библиотечного
|
||||||
|
* `GRID_LAYOUTS` (@livekit/components-core, `helper/grid-layouts.ts`).
|
||||||
|
*
|
||||||
|
* Зачем свой набор. Библиотечный требует `minWidth: 560` уже для сетки 2×2,
|
||||||
|
* поэтому на телефоне (~390px) максимальной раскладкой оказывается `1×2` — две
|
||||||
|
* плитки на страницу, и десяток участников превращается в пять страниц
|
||||||
|
* листания. Здесь добавлены два портретных варианта под узкий экран (2×2 и
|
||||||
|
* 2×3): плитка шириной ~190px с именем и аватаром читается нормально, а
|
||||||
|
* страниц становится втрое меньше.
|
||||||
|
*
|
||||||
|
* Как это читает `selectGridLayout` (см. её исходник): раскладки сортируются
|
||||||
|
* по `maxTiles` (при равенстве — по `minWidth`), берётся первая, вмещающая всех
|
||||||
|
* участников, при этом раскладка пропускается, если ДАЛЬШЕ есть другая с тем же
|
||||||
|
* `maxTiles` и подходящей ориентацией контейнера. Отсюда пары «портрет/
|
||||||
|
* ландшафт» на одно и то же число плиток: 1×2 / 2×1 и 2×3 / 3×2 — на широком
|
||||||
|
* экране выигрывает горизонтальный вариант, на узком вертикальный. Если
|
||||||
|
* контейнер не дотягивает до `minWidth`/`minHeight`, функция рекурсивно
|
||||||
|
* спускается к меньшей раскладке, а лишние участники уходят на следующую
|
||||||
|
* страницу (`usePagination`).
|
||||||
|
*/
|
||||||
|
const STAGE_GRID_LAYOUTS: GridLayoutDefinition[] = [
|
||||||
|
{ columns: 1, rows: 1 },
|
||||||
|
{ columns: 1, rows: 2, orientation: 'portrait' },
|
||||||
|
{ columns: 2, rows: 1, orientation: 'landscape' },
|
||||||
|
// 4 плитки помещаются и на телефоне: 390px / 2 ≈ 190px на плитку.
|
||||||
|
{ columns: 2, rows: 2, minWidth: 360 },
|
||||||
|
{ columns: 2, rows: 3, minWidth: 360, minHeight: 480, orientation: 'portrait' },
|
||||||
|
{ columns: 3, rows: 2, minWidth: 700, orientation: 'landscape' },
|
||||||
|
{ columns: 3, rows: 3, minWidth: 700 },
|
||||||
|
{ columns: 4, rows: 4, minWidth: 960 },
|
||||||
|
{ columns: 5, rows: 5, minWidth: 1100 },
|
||||||
|
]
|
||||||
|
|
||||||
|
interface StageGridProps {
|
||||||
|
tracks: TrackReferenceOrPlaceholder[]
|
||||||
|
/** Шаблон плитки — рендерится для каждого трека страницы (как у `GridLayout`, через `TrackLoop`). */
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Равномерная сетка плиток с пагинацией — собственная сборка вместо
|
||||||
|
* библиотечного `GridLayout`.
|
||||||
|
*
|
||||||
|
* Причина ровно одна: `GridLayout` не пробрасывает `gridLayouts` в
|
||||||
|
* `useGridLayout`, то есть набор раскладок у неё жёстко зашит (см.
|
||||||
|
* `STAGE_GRID_LAYOUTS` выше). Всё остальное — те же публичные хуки, что
|
||||||
|
* использует оригинал (`useGridLayout` + `usePagination` + `useSwipe` +
|
||||||
|
* `TrackLoop`) и тот же класс `.lk-grid-layout`, поэтому и стили библиотеки, и
|
||||||
|
* `useVisualStableUpdate` внутри пагинации работают как раньше. Отличается
|
||||||
|
* только элемент управления страницами: библиотечные `PaginationIndicator`/
|
||||||
|
* `PaginationControl` из пакета не экспортируются, вместо них — свой
|
||||||
|
* `.stage-grid-pages` (кнопки со стрелками + счётчик, доступен и мышью, и с
|
||||||
|
* клавиатуры; на тач-экране страницы листаются ещё и свайпом).
|
||||||
|
*/
|
||||||
|
export function StageGrid({ tracks, children }: StageGridProps) {
|
||||||
|
const gridEl = useRef<HTMLDivElement | null>(null)
|
||||||
|
// Хуки библиотеки объявлены с `RefObject<HTMLDivElement>` (типы React 18, где
|
||||||
|
// `current` был readonly и тип вёл себя ковариантно). В типах React 19
|
||||||
|
// `current` мутабельный, поэтому `RefObject<HTMLDivElement | null>` в такой
|
||||||
|
// параметр уже не присваивается — приведение безопасно: оба хука только
|
||||||
|
// читают `.current` (ResizeObserver и слушатели touch-событий).
|
||||||
|
const gridRef = gridEl as RefObject<HTMLDivElement>
|
||||||
|
const { layout } = useGridLayout(gridRef, tracks.length, { gridLayouts: STAGE_GRID_LAYOUTS })
|
||||||
|
const pagination = usePagination(layout.maxTiles, tracks)
|
||||||
|
|
||||||
|
useSwipe(gridRef, {
|
||||||
|
onLeftSwipe: pagination.nextPage,
|
||||||
|
onRightSwipe: pagination.prevPage,
|
||||||
|
})
|
||||||
|
|
||||||
|
const hasPages = pagination.totalPageCount > 1
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={gridEl} className="lk-grid-layout stage-grid" data-lk-pagination={hasPages}>
|
||||||
|
<TrackLoop tracks={pagination.tracks}>{children}</TrackLoop>
|
||||||
|
{hasPages && (
|
||||||
|
<div className="stage-grid-pages">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Предыдущая страница участников"
|
||||||
|
disabled={pagination.currentPage <= 1}
|
||||||
|
onClick={pagination.prevPage}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="lucide" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
<span aria-live="polite">
|
||||||
|
{pagination.currentPage} / {pagination.totalPageCount}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Следующая страница участников"
|
||||||
|
disabled={pagination.currentPage >= pagination.totalPageCount}
|
||||||
|
onClick={pagination.nextPage}
|
||||||
|
>
|
||||||
|
<ChevronRight className="lucide" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
130
frontend/src/components/room/StageViewOptions.tsx
Normal file
130
frontend/src/components/room/StageViewOptions.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
import { useEffect, useId, useRef, useState } from 'react'
|
||||||
|
import { LayoutGrid } from 'lucide-react'
|
||||||
|
import { STAGE_LAYOUT_MODE_OPTIONS, type StageLayoutMode } from '@/lib/stageLayoutMode'
|
||||||
|
|
||||||
|
export interface StageViewProps {
|
||||||
|
layoutMode: StageLayoutMode
|
||||||
|
onLayoutModeChange: (mode: StageLayoutMode) => void
|
||||||
|
/** Карусель остальных участников скрыта — на сцене только основная область. */
|
||||||
|
hideOthers: boolean
|
||||||
|
onHideOthersChange: (hide: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Блок выбора вида сцены: режим показа (три варианта) + скрытие остальных
|
||||||
|
* участников. Один и тот же блок рендерится в двух местах — в поповере кнопки
|
||||||
|
* «Вид» на десктопе (`StageViewMenu` ниже) и секцией внутри мобильной шторки
|
||||||
|
* настроек (`DeviceSettingsDialog`), поэтому вынесен отдельно.
|
||||||
|
*
|
||||||
|
* «Скрыть остальных» в режиме «Плитки» заблокировано, а не спрятано: все
|
||||||
|
* плитки там равноправны, скрывать нечего, но исчезающий на ровном месте
|
||||||
|
* переключатель читался бы как баг — вместо этого он выключен с пояснением.
|
||||||
|
*/
|
||||||
|
export function StageViewOptions({
|
||||||
|
layoutMode,
|
||||||
|
onLayoutModeChange,
|
||||||
|
hideOthers,
|
||||||
|
onHideOthersChange,
|
||||||
|
}: StageViewProps) {
|
||||||
|
// Радиогруппе нужно имя, уникальное на документ: блок может оказаться на
|
||||||
|
// странице дважды (десктопный поповер и шторка живут в разных ветках
|
||||||
|
// рендера, но полагаться на это не стоит).
|
||||||
|
const groupName = useId()
|
||||||
|
const hideOthersDisabled = layoutMode === 'tiles'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="stage-view-options">
|
||||||
|
<fieldset className="stage-view-modes">
|
||||||
|
<legend>Режим показа</legend>
|
||||||
|
{STAGE_LAYOUT_MODE_OPTIONS.map((option) => (
|
||||||
|
<label
|
||||||
|
key={option.mode}
|
||||||
|
className={`stage-view-mode${layoutMode === option.mode ? ' is-active' : ''}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name={groupName}
|
||||||
|
value={option.mode}
|
||||||
|
checked={layoutMode === option.mode}
|
||||||
|
onChange={() => onLayoutModeChange(option.mode)}
|
||||||
|
/>
|
||||||
|
<span className="stage-view-mode-text">
|
||||||
|
<span className="stage-view-mode-title">{option.title}</span>
|
||||||
|
<span className="stage-view-mode-hint">{option.hint}</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<label className={`stage-view-toggle${hideOthersDisabled ? ' is-disabled' : ''}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={hideOthers}
|
||||||
|
disabled={hideOthersDisabled}
|
||||||
|
onChange={(e) => onHideOthersChange(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span>Скрыть остальных участников</span>
|
||||||
|
</label>
|
||||||
|
{hideOthersDisabled && (
|
||||||
|
<p className="stage-view-note">В режиме «Плитки» все участники равноправны — скрывать нечего.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Кнопка «Вид» в тулбаре с поповером над ней — десктопный вход в
|
||||||
|
* `StageViewOptions`. На мобильном не рендерится вовсе (см. `RoomToolbar`):
|
||||||
|
* там тулбар и так ужат до пяти кнопок, а те же настройки доступны секцией
|
||||||
|
* «Вид» в шторке настроек.
|
||||||
|
*
|
||||||
|
* Закрытие по клику вне и Escape — тем же паттерном, что меню пользователя в
|
||||||
|
* `ShellTopbar` (слушатели на document, пока меню открыто).
|
||||||
|
*/
|
||||||
|
export function StageViewMenu(props: StageViewProps) {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const wrapRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return
|
||||||
|
|
||||||
|
function handlePointerDown(event: MouseEvent) {
|
||||||
|
if (wrapRef.current && !wrapRef.current.contains(event.target as Node)) {
|
||||||
|
setOpen(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleKeydown(event: KeyboardEvent) {
|
||||||
|
if (event.key === 'Escape') setOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handlePointerDown)
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handlePointerDown)
|
||||||
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
}
|
||||||
|
}, [open])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="tb-menu-wrap" ref={wrapRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`tb-btn${open ? ' is-panel-open' : ''}`}
|
||||||
|
aria-label="Вид сцены"
|
||||||
|
aria-expanded={open}
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
onClick={() => setOpen((v) => !v)}
|
||||||
|
>
|
||||||
|
<span className="icon-shell">
|
||||||
|
<LayoutGrid className="lucide" aria-hidden="true" />
|
||||||
|
</span>
|
||||||
|
<span className="label">Вид</span>
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<div className="tb-menu" role="dialog" aria-label="Вид сцены">
|
||||||
|
<StageViewOptions {...props} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
27
frontend/src/hooks/useIsCompactViewport.ts
Normal file
27
frontend/src/hooks/useIsCompactViewport.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
/** Совпадает с мобильным брейкпоинтом комнаты (`room.css`, `max-width: 600px`). */
|
||||||
|
const COMPACT_VIEWPORT_QUERY = '(max-width: 600px)'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Живое отслеживание мобильной ширины — та же схема, что системная тема в
|
||||||
|
* `useTheme.ts` (matchMedia + change-листенер).
|
||||||
|
*
|
||||||
|
* Нужен там, где мобильный вариант — это ДРУГАЯ разметка, а не другие стили:
|
||||||
|
* шторка вместо модалки (`DeviceSettingsDialog`) и условный рендеринг кнопок
|
||||||
|
* тулбара (`RoomToolbar`). Прятать элементы новым CSS-правилом поверх
|
||||||
|
* медиазапроса в `room.css` намеренно не стали — там уже была битва
|
||||||
|
* специфичности (см. комментарий в конце `room.css`).
|
||||||
|
*/
|
||||||
|
export function useIsCompactViewport(): boolean {
|
||||||
|
const [isCompact, setIsCompact] = useState(() => window.matchMedia(COMPACT_VIEWPORT_QUERY).matches)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = window.matchMedia(COMPACT_VIEWPORT_QUERY)
|
||||||
|
const handleChange = (event: MediaQueryListEvent) => setIsCompact(event.matches)
|
||||||
|
media.addEventListener('change', handleChange)
|
||||||
|
return () => media.removeEventListener('change', handleChange)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return isCompact
|
||||||
|
}
|
||||||
55
frontend/src/lib/stageLayoutMode.ts
Normal file
55
frontend/src/lib/stageLayoutMode.ts
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
const STORAGE_KEY = 'vidconf-stage-layout-mode'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Режим показа участников на сцене конференции — выбирается пользователем
|
||||||
|
* явно (до 0.0.11 раскладка выбиралась автоматически по наличию демонстрации
|
||||||
|
* экрана и числу участников).
|
||||||
|
*
|
||||||
|
* - `standard` — один крупный участник (фокус) + остальные в карусели сбоку;
|
||||||
|
* кто именно в фокусе, по-прежнему решает `pickStageFocus`.
|
||||||
|
* - `tiles` — все участники равными плитками, без выделенного крупного.
|
||||||
|
* - `live-tiles` — равномерная сетка ТОЛЬКО из участников с включённой
|
||||||
|
* камерой, остальные (камера выключена) — в карусели сбоку.
|
||||||
|
*/
|
||||||
|
export type StageLayoutMode = 'standard' | 'tiles' | 'live-tiles'
|
||||||
|
|
||||||
|
/** Порядок и подписи режимов в переключателе (единый источник для тулбара и мобильной шторки). */
|
||||||
|
export const STAGE_LAYOUT_MODE_OPTIONS: readonly {
|
||||||
|
mode: StageLayoutMode
|
||||||
|
title: string
|
||||||
|
hint: string
|
||||||
|
}[] = [
|
||||||
|
{ mode: 'standard', title: 'Стандарт', hint: 'Крупно — активный участник, остальные сбоку' },
|
||||||
|
{ mode: 'tiles', title: 'Плитки', hint: 'Все участники равными плитками' },
|
||||||
|
{ mode: 'live-tiles', title: 'Живые плитки', hint: 'Плитками — только с камерой, остальные сбоку' },
|
||||||
|
]
|
||||||
|
|
||||||
|
function isStageLayoutMode(value: string | null): value is StageLayoutMode {
|
||||||
|
return value === 'standard' || value === 'tiles' || value === 'live-tiles'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Сохранённый режим показа — читается при входе в комнату.
|
||||||
|
*
|
||||||
|
* Персист сделан своим модулем (как `lib/audioOutputDevice.ts`), а не через
|
||||||
|
* `usePersistentUserChoices` LiveKit: их `LocalUserChoices` — фиксированная
|
||||||
|
* структура про устройства и имя, поля для нашей раскладки там нет и добавить
|
||||||
|
* его нельзя. Схема хранения та же: одна строка в localStorage, любые сбои
|
||||||
|
* доступа к нему гасятся (приватный режим/политики браузера).
|
||||||
|
*/
|
||||||
|
export function loadStageLayoutMode(): StageLayoutMode {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY)
|
||||||
|
return isStageLayoutMode(stored) ? stored : 'standard'
|
||||||
|
} catch {
|
||||||
|
return 'standard'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function saveStageLayoutMode(mode: StageLayoutMode): void {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, mode)
|
||||||
|
} catch {
|
||||||
|
// Сохранение недоступно — выбор продержится до конца сессии в комнате.
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -18,6 +18,7 @@ import { RoomToolbar } from '@/components/room/RoomToolbar'
|
|||||||
import { ChatPanel } from '@/components/room/ChatPanel'
|
import { ChatPanel } from '@/components/room/ChatPanel'
|
||||||
import { DeviceSettingsDialog } from '@/components/room/DeviceSettingsDialog'
|
import { DeviceSettingsDialog } from '@/components/room/DeviceSettingsDialog'
|
||||||
import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
|
import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
|
||||||
|
import { loadStageLayoutMode, saveStageLayoutMode, type StageLayoutMode } from '@/lib/stageLayoutMode'
|
||||||
|
|
||||||
interface RoomJoinState {
|
interface RoomJoinState {
|
||||||
livekitUrl: string
|
livekitUrl: string
|
||||||
@@ -150,6 +151,30 @@ export function RoomPage() {
|
|||||||
const pip = useRoomPiP(roomRootRef)
|
const pip = useRoomPiP(roomRootRef)
|
||||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||||
|
|
||||||
|
// Вид сцены живёт здесь, а не в `RoomStage`: переключатели — в тулбаре и в
|
||||||
|
// шторке настроек, а сцена их только читает (общий предок).
|
||||||
|
//
|
||||||
|
// Режим показа персистится между заходами в комнату (`lib/stageLayoutMode.ts`,
|
||||||
|
// localStorage) — это устойчивое предпочтение: кто любит «плитки», хочет их
|
||||||
|
// и завтра. А вот «скрыть остальных» намеренно НЕ сохраняется: это разовое
|
||||||
|
// действие по ходу разговора, и войти в новую конференцию сразу без половины
|
||||||
|
// участников — сюрприз, а не удобство. Сбрасывается вместе с уходом со
|
||||||
|
// страницы комнаты.
|
||||||
|
const [layoutMode, setLayoutMode] = useState<StageLayoutMode>(loadStageLayoutMode)
|
||||||
|
const [hideOthers, setHideOthers] = useState(false)
|
||||||
|
|
||||||
|
const handleLayoutModeChange = useCallback((mode: StageLayoutMode) => {
|
||||||
|
setLayoutMode(mode)
|
||||||
|
saveStageLayoutMode(mode)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Ключ трека, который сцена показывает крупно. Живёт ЗДЕСЬ, а не только
|
||||||
|
// внутри `RoomStage`, потому что при открытии мини-плеера сцена
|
||||||
|
// размонтируется в основном окне и монтируется заново в PiP-окне (портал
|
||||||
|
// ниже) — без этого мостика новый экземпляр начинал бы выбор фокуса с нуля и
|
||||||
|
// открывал мини-окно на самом пользователе. Подробнее — докстринг `RoomStage`.
|
||||||
|
const [stageFocusKey, setStageFocusKey] = useState<string | null>(null)
|
||||||
|
|
||||||
// Сохранённый выбор устройств — читаем через собственный вызов
|
// Сохранённый выбор устройств — читаем через собственный вызов
|
||||||
// usePersistentUserChoices (независимый от того, что использует
|
// usePersistentUserChoices (независимый от того, что использует
|
||||||
// DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
|
// DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
|
||||||
@@ -162,6 +187,22 @@ export function RoomPage() {
|
|||||||
const { userChoices } = usePersistentUserChoices()
|
const { userChoices } = usePersistentUserChoices()
|
||||||
const roomOptions = useMemo<RoomOptions>(
|
const roomOptions = useMemo<RoomOptions>(
|
||||||
() => ({
|
() => ({
|
||||||
|
// Оба флага в LiveKit по умолчанию выключены, и без них каждый клиент
|
||||||
|
// подписан на полное качество всех чужих треков независимо от размера
|
||||||
|
// плитки, а каждый паблишер шлёт все слои симулкаста, даже если их никто
|
||||||
|
// не смотрит. На тесте 28.07.2026 (19 участников, ~8 камер) это дало
|
||||||
|
// устойчивые 140–169 Мбит/с исходящего трафика при пике 240, 662 события
|
||||||
|
// `remote bwe: channel congestion detected` и 146 переходов аллокатора
|
||||||
|
// STABLE → DEFICIENT — то есть видимый участникам лаг.
|
||||||
|
//
|
||||||
|
// adaptiveStream: подписка на слой по фактическому размеру плитки на
|
||||||
|
// экране + пауза треков, которые сейчас не отрисованы. Именно на нём
|
||||||
|
// начинает экономить уже написанный код: «скрыть остальных»
|
||||||
|
// (RoomStage) не рендерит карусель, а пагинация StageGrid рендерит
|
||||||
|
// только текущую страницу — неприаттаченные треки считаются невидимыми.
|
||||||
|
// dynacast: паблишер прекращает отдавать слои, на которые нет подписчиков.
|
||||||
|
adaptiveStream: true,
|
||||||
|
dynacast: true,
|
||||||
audioCaptureDefaults: { deviceId: userChoices.audioDeviceId || undefined },
|
audioCaptureDefaults: { deviceId: userChoices.audioDeviceId || undefined },
|
||||||
videoCaptureDefaults: { deviceId: userChoices.videoDeviceId || undefined },
|
videoCaptureDefaults: { deviceId: userChoices.videoDeviceId || undefined },
|
||||||
// Аудиовыход (колонки/наушники/bluetooth) — отдельный персист, не через
|
// Аудиовыход (колонки/наушники/bluetooth) — отдельный персист, не через
|
||||||
@@ -218,7 +259,14 @@ export function RoomPage() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<RoomStage />
|
<RoomStage
|
||||||
|
layoutMode={layoutMode}
|
||||||
|
hideOthers={hideOthers}
|
||||||
|
onShowOthers={() => setHideOthers(false)}
|
||||||
|
onHideOthers={() => setHideOthers(true)}
|
||||||
|
initialFocusKey={stageFocusKey}
|
||||||
|
onFocusKeyChange={setStageFocusKey}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{chatVisible && chatOpen && (
|
{chatVisible && chatOpen && (
|
||||||
<ChatPanel
|
<ChatPanel
|
||||||
@@ -242,15 +290,32 @@ export function RoomPage() {
|
|||||||
pipSupported={pip.supported}
|
pipSupported={pip.supported}
|
||||||
pipActive={pip.active}
|
pipActive={pip.active}
|
||||||
onTogglePiP={pip.toggle}
|
onTogglePiP={pip.toggle}
|
||||||
|
layoutMode={layoutMode}
|
||||||
|
onLayoutModeChange={handleLayoutModeChange}
|
||||||
|
hideOthers={hideOthers}
|
||||||
|
onHideOthersChange={setHideOthers}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{settingsOpen && <DeviceSettingsDialog onClose={() => setSettingsOpen(false)} />}
|
{settingsOpen && (
|
||||||
|
<DeviceSettingsDialog
|
||||||
|
onClose={() => setSettingsOpen(false)}
|
||||||
|
layoutMode={layoutMode}
|
||||||
|
onLayoutModeChange={handleLayoutModeChange}
|
||||||
|
hideOthers={hideOthers}
|
||||||
|
onHideOthersChange={setHideOthers}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{/* Портал внутрь LiveKitRoom (не как сосед снаружи!) — RoomStage,
|
{/* Портал внутрь LiveKitRoom (не как сосед снаружи!) — RoomStage,
|
||||||
рендерящийся в PiP-окне, продолжает читать RoomContext/треки.
|
рендерящийся в PiP-окне, продолжает читать RoomContext/треки.
|
||||||
`variant="pip"` — мини-плеер
|
`variant="pip"` — мини-плеер
|
||||||
показывает только активное окно (одну плитку), без карусели/грида
|
показывает только активное окно (одну плитку), без карусели/грида
|
||||||
основного окна. */}
|
основного окна. `initialFocusKey` — то, что было крупно в основном
|
||||||
{pip.pipWindow && createPortal(<RoomStage variant="pip" />, pip.pipWindow.document.body)}
|
окне: без него мини-окно открывалось на самом пользователе. */}
|
||||||
|
{pip.pipWindow &&
|
||||||
|
createPortal(
|
||||||
|
<RoomStage variant="pip" initialFocusKey={stageFocusKey} onFocusKeyChange={setStageFocusKey} />,
|
||||||
|
pip.pipWindow.document.body,
|
||||||
|
)}
|
||||||
</LiveKitRoom>
|
</LiveKitRoom>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -47,7 +47,9 @@
|
|||||||
.room-invite-chip span { font: var(--text-mono-sm); color: var(--color-room-text-secondary); }
|
.room-invite-chip span { font: var(--text-mono-sm); color: var(--color-room-text-secondary); }
|
||||||
|
|
||||||
.room-main { display: flex; flex: 1; min-height: 0; }
|
.room-main { display: flex; flex: 1; min-height: 0; }
|
||||||
.stage { flex: 1; display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); gap: var(--space-4); min-width: 0; }
|
/* `position: relative` — якорь для кнопки «Показать остальных» (`.stage-show-others`),
|
||||||
|
которая висит оверлеем над сценой, см. её правило ниже. */
|
||||||
|
.stage { flex: 1; display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); gap: var(--space-4); min-width: 0; position: relative; }
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Демонстрация экрана: `object-fit: cover` (дефолт VideoTrack для
|
* Демонстрация экрана: `object-fit: cover` (дефолт VideoTrack для
|
||||||
@@ -115,6 +117,10 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
|||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.stage-tiles.lk-focus-layout { grid-template-columns: 1fr; }
|
.stage-tiles.lk-focus-layout { grid-template-columns: 1fr; }
|
||||||
.stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
|
.stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
|
||||||
|
/* Их `.lk-carousel{order:1}` (ставит миниатюры ПОД спикера) больше не
|
||||||
|
действует: прямой ребёнок грида теперь обёртка `.stage-side`, а не сама
|
||||||
|
карусель — переносим порядок на неё, иначе миниатюры уезжают наверх. */
|
||||||
|
.stage-side { order: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -130,6 +136,123 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
|||||||
.room-single-tile { flex: 1; min-height: 0; display: flex; }
|
.room-single-tile { flex: 1; min-height: 0; display: flex; }
|
||||||
.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%; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Колонка миниатюр (кнопка «Скрыть» + карусель) ----------
|
||||||
|
* Прямой ребёнок `.lk-focus-layout` — вместо самой карусели, потому что над
|
||||||
|
* ней стоит кнопка «Скрыть» (см. `RoomStage`). Карусель занимает весь остаток
|
||||||
|
* колонки: ей важны собственные размеры — `CarouselLayout` по ним и решает,
|
||||||
|
* вертикальная она или горизонтальная (см. комментарий в `RoomStage`).
|
||||||
|
* `min-height: 0` обязателен — иначе flex-элемент не даёт себя сжать и
|
||||||
|
* колонка вылезает за высоту сцены.
|
||||||
|
*/
|
||||||
|
.stage-side { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 0; }
|
||||||
|
.stage-side .lk-carousel { flex: 1; min-height: 0; }
|
||||||
|
.stage-side-hide {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--color-room-tile-border);
|
||||||
|
background: var(--color-room-tile);
|
||||||
|
color: var(--color-room-text-secondary);
|
||||||
|
font: var(--text-caption);
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage-side-hide:hover { background: var(--color-room-tile-hover); color: var(--color-room-text-primary); }
|
||||||
|
.stage-side-hide svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Основная область без карусели ----------
|
||||||
|
* `.stage-main-only` — сцена, где карусель не рендерится вовсе: плиточные
|
||||||
|
* режимы («Плитки» всегда, «Живые плитки» когда камеры выключены не у кого),
|
||||||
|
* «Стандарт» с единственным участником и любой режим при включённом «скрыть
|
||||||
|
* остальных». Единственный ребёнок (плитка фокуса или сетка `.stage-grid`)
|
||||||
|
* занимает всё место — тем же приёмом, что `.room-single-tile` выше, но без
|
||||||
|
* `min-height` мини-плеера: в основном окне высота приходит от `.room-main`.
|
||||||
|
*/
|
||||||
|
.stage-main-only { display: flex; }
|
||||||
|
.stage-main-only > * { flex: 1; min-width: 0; min-height: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Равномерная сетка плиток (`StageGrid`) ----------
|
||||||
|
* Класс `.lk-grid-layout` библиотеки на месте (оттуда вся геометрия сетки:
|
||||||
|
* `--lk-col-count`/`--lk-row-count`, gap, padding), здесь — только то, чего у
|
||||||
|
* неё нет: сброс минимальных размеров (сетка может жить внутри grid-ячейки
|
||||||
|
* `.lk-focus-layout`, где без `min-*: 0` она распирала бы колонку) и якорь для
|
||||||
|
* собственного переключателя страниц.
|
||||||
|
*/
|
||||||
|
.stage-grid { position: relative; min-width: 0; min-height: 0; }
|
||||||
|
.stage-grid-pages {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--lk-grid-gap) / 2);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: rgba(30, 30, 30, 0.85);
|
||||||
|
border: 1px solid var(--color-room-tile-border);
|
||||||
|
color: var(--color-room-text-primary);
|
||||||
|
font: var(--text-caption);
|
||||||
|
}
|
||||||
|
.stage-grid-pages button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage-grid-pages button:hover:not(:disabled) { background: var(--color-room-tile-hover); }
|
||||||
|
.stage-grid-pages button:disabled { opacity: 0.35; cursor: default; }
|
||||||
|
.stage-grid-pages svg { width: 16px; height: 16px; }
|
||||||
|
.stage-grid-pages span { padding: 0 4px; font-variant-numeric: tabular-nums; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Кнопка «Показать остальных» ----------
|
||||||
|
* Единственный видимый способ вернуть скрытую карусель, поэтому висит прямо на
|
||||||
|
* сцене, а не только в меню «Вид»: пользователь не должен «терять» участников
|
||||||
|
* без понятного способа их вернуть. Внизу по центру — там у плиток пусто
|
||||||
|
* (`.lk-participant-metadata` прижата к левому и правому углам).
|
||||||
|
*/
|
||||||
|
.stage-show-others {
|
||||||
|
position: absolute;
|
||||||
|
bottom: var(--space-5);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
border: 1px solid var(--color-room-tile-border);
|
||||||
|
background: rgba(30, 30, 30, 0.9);
|
||||||
|
color: var(--color-room-text-primary);
|
||||||
|
font: var(--text-body);
|
||||||
|
font-weight: 600;
|
||||||
|
/* Иначе на узком экране подпись ломается на две строки и кнопка вырастает
|
||||||
|
в высоту вдвое (поймали на 390px). */
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage-show-others:hover { background: var(--color-room-tile-hover); }
|
||||||
|
.stage-show-others svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||||
|
|
||||||
/* Нижний тулбар: свои кнопки на хуках LiveKit (TrackToggle/DisconnectButton) */
|
/* Нижний тулбар: свои кнопки на хуках LiveKit (TrackToggle/DisconnectButton) */
|
||||||
.room-toolbar {
|
.room-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -200,6 +323,75 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Кнопка «Вид» и её поповер (десктоп) ----------
|
||||||
|
* Обёртка вокруг кнопки тулбара — якорь для всплывающей панели над ней
|
||||||
|
* (`StageViewMenu`). На мобильном ни кнопки, ни поповера нет вовсе: там блок
|
||||||
|
* настроек вида рендерится секцией внутри шторки (условный рендеринг в React,
|
||||||
|
* а не скрытие через CSS, — см. `RoomToolbar`).
|
||||||
|
*/
|
||||||
|
.tb-menu-wrap { position: relative; display: flex; }
|
||||||
|
.tb-menu {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(100% + var(--space-2));
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 50;
|
||||||
|
width: 280px;
|
||||||
|
padding: var(--space-4);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--color-room-tile-border);
|
||||||
|
background: var(--color-room-surface-raised);
|
||||||
|
box-shadow: var(--shadow-room-panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ---------- Блок «Вид сцены» (`StageViewOptions`) ----------
|
||||||
|
* Общий для десктопного поповера и мобильной шторки — отсюда нейтральная
|
||||||
|
* геометрия без привязки к контейнеру (ширину задаёт родитель).
|
||||||
|
*/
|
||||||
|
.stage-view-options { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
|
/* Секция «Вид» внутри шторки настроек — отбивка как у `.room-field` (свой
|
||||||
|
класс, а не `.room-field`, см. комментарий в `DeviceSettingsDialog`). */
|
||||||
|
.stage-view-section { margin-bottom: var(--space-5); }
|
||||||
|
.stage-view-modes { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: none; }
|
||||||
|
.stage-view-modes legend {
|
||||||
|
padding: 0 0 var(--space-2);
|
||||||
|
font: var(--text-caption);
|
||||||
|
color: var(--color-room-text-tertiary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
.stage-view-mode {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage-view-mode:hover { background: var(--color-room-tile); }
|
||||||
|
.stage-view-mode.is-active { background: var(--color-room-tile); border-color: var(--color-room-speaker-ring); }
|
||||||
|
.stage-view-mode input { margin-top: 3px; accent-color: var(--color-room-mic-on); flex-shrink: 0; }
|
||||||
|
.stage-view-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||||
|
.stage-view-mode-title { font: var(--text-body); font-weight: 600; color: var(--color-room-text-primary); }
|
||||||
|
.stage-view-mode-hint { font: var(--text-caption); text-transform: none; letter-spacing: normal; color: var(--color-room-text-secondary); }
|
||||||
|
|
||||||
|
.stage-view-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding-top: var(--space-3);
|
||||||
|
border-top: 1px solid var(--color-room-tile-border);
|
||||||
|
font: var(--text-body);
|
||||||
|
color: var(--color-room-text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage-view-toggle input { accent-color: var(--color-room-mic-on); flex-shrink: 0; }
|
||||||
|
.stage-view-toggle.is-disabled { color: var(--color-room-text-tertiary); cursor: default; }
|
||||||
|
.stage-view-note { margin: 0; font: var(--text-caption); text-transform: none; letter-spacing: normal; color: var(--color-room-text-tertiary); }
|
||||||
|
|
||||||
/* ---------- Панель чата (см. design/mockups/room.html, .chat-panel) ---------- */
|
/* ---------- Панель чата (см. design/mockups/room.html, .chat-panel) ---------- */
|
||||||
.chat-panel {
|
.chat-panel {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
@@ -518,17 +710,50 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
|||||||
}
|
}
|
||||||
.room-pip-placeholder svg { width: 48px; height: 48px; color: var(--color-room-text-tertiary); }
|
.room-pip-placeholder svg { width: 48px; height: 48px; color: var(--color-room-text-tertiary); }
|
||||||
|
|
||||||
/* ---------- Аватар вместо иконки-заглушки при выключенной камере ---------- */
|
/* ---------- Аватар вместо иконки-заглушки при выключенной камере ----------
|
||||||
|
* Размер считается от УЗКОЙ стороны плитки, а не от ширины и высоты по
|
||||||
|
* отдельности. Раньше здесь было `width: 40%; height: 40%` — проценты от
|
||||||
|
* РАЗНЫХ сторон, а круглым `.avatar` делает только `border-radius: 50%`
|
||||||
|
* (shell.css), поэтому на неквадратной плитке (а они почти всегда такие)
|
||||||
|
* получался эллипс. Плюс `max-*: 96px` не давал иконке вырасти на большой
|
||||||
|
* плитке фокуса.
|
||||||
|
*
|
||||||
|
* Механика: контейнером container-запросов делаем `.lk-participant-placeholder`
|
||||||
|
* — блок библиотеки, который `position: absolute; inset: 0`, то есть в
|
||||||
|
* точности повторяет плитку и уже имеет обе размерности (обязательное условие
|
||||||
|
* для `container-type: size`). Контейнер именно на нём, а не на самой
|
||||||
|
* `.lk-participant-tile`: `container-type: size` включает size containment, и
|
||||||
|
* на плитке он отрезал бы её содержимое (видео, метаданные) от влияния на
|
||||||
|
* авторазмер — на placeholder-обёртке внутри ничего, кроме аватара, нет,
|
||||||
|
* ломать нечему.
|
||||||
|
*
|
||||||
|
* `cqmin` — минимум из ширины и высоты контейнера, буквально «узкая сторона»:
|
||||||
|
* - основная (крупная) плитка — 50cqmin, примерно половина плитки;
|
||||||
|
* - плитки карусели — во всю узкую сторону минус отступ 5px с каждого края.
|
||||||
|
* `aspect-ratio: 1` + `height: auto` гарантируют круг при любой форме плитки:
|
||||||
|
* диаметр никогда не больше меньшей стороны, дальше иконка уменьшается
|
||||||
|
* пропорционально вместе с плиткой. `min-width: 32px` оставлен — на совсем
|
||||||
|
* крошечной плитке инициалы должны оставаться читаемыми (сжатие плитки ниже
|
||||||
|
* этого порога и так означает, что показывать там нечего).
|
||||||
|
*/
|
||||||
|
.lk-participant-tile .lk-participant-placeholder {
|
||||||
|
container-type: size;
|
||||||
|
}
|
||||||
.room-tile-avatar {
|
.room-tile-avatar {
|
||||||
width: 40%;
|
width: 50cqmin;
|
||||||
height: 40%;
|
height: auto;
|
||||||
|
aspect-ratio: 1;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
min-height: 32px;
|
min-height: 0;
|
||||||
max-width: 96px;
|
max-width: none;
|
||||||
max-height: 96px;
|
max-height: none;
|
||||||
font-size: clamp(12px, 3vw, 28px);
|
font-size: clamp(12px, 20cqmin, 44px);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
.lk-carousel .room-tile-avatar {
|
||||||
|
width: calc(100cqmin - 10px);
|
||||||
|
font-size: clamp(12px, 34cqmin, 28px);
|
||||||
|
}
|
||||||
|
|
||||||
.room-loader, .room-error {
|
.room-loader, .room-error {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
13
install.sh
13
install.sh
@@ -526,13 +526,14 @@ docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --wait postgres r
|
|||||||
# exist" и healthcheck (--wait) никогда не проходит. `compose run` запускает
|
# exist" и healthcheck (--wait) никогда не проходит. `compose run` запускает
|
||||||
# одноразовый контейнер с нужной командой, не поднимая uvicorn/lifespan.
|
# одноразовый контейнер с нужной командой, не поднимая uvicorn/lifespan.
|
||||||
echo "[install] Применяю миграции Alembic и seed (админ/справочники) — до старта backend"
|
echo "[install] Применяю миграции Alembic и seed (админ/справочники) — до старта backend"
|
||||||
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" run --rm backend uv run alembic upgrade head
|
# `--no-sync`: окружение собрано в образе, повторная синхронизация в рантайме
|
||||||
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" run --rm backend uv run python -m scripts.seed
|
# только тянула бы dev-группу (см. комментарий в backend/Dockerfile).
|
||||||
|
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" run --rm backend uv run --no-sync alembic upgrade head
|
||||||
|
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" run --rm backend uv run --no-sync python -m scripts.seed
|
||||||
|
|
||||||
echo "[install] docker compose up -d --wait (backend/worker/nginx и остальные сервисы профиля)"
|
echo "[install] docker compose up -d --wait (backend/worker/nginx и остальные сервисы профиля)"
|
||||||
# Первый старт backend/worker включает `uv run` (синхронизация окружения +
|
# На слабой/загруженной машине healthcheck может не успеть пройти за отведённые
|
||||||
# компиляция байткода) — на слабой/загруженной машине healthcheck может не
|
# retries, и `--wait` вернёт "container is
|
||||||
# успеть пройти за отведённые retries, и `--wait` вернёт "container is
|
|
||||||
# unhealthy", хотя сервис через несколько секунд становится healthy. Команда
|
# unhealthy", хотя сервис через несколько секунд становится healthy. Команда
|
||||||
# идемпотентна, поэтому повторяем её несколько раз: повтор лишь дожидается
|
# идемпотентна, поэтому повторяем её несколько раз: повтор лишь дожидается
|
||||||
# уже стартующих контейнеров, ничего не пересоздавая.
|
# уже стартующих контейнеров, ничего не пересоздавая.
|
||||||
@@ -573,7 +574,7 @@ if [ "$FRESH_ENV" != "1" ]; then
|
|||||||
fi
|
fi
|
||||||
if [ "$APPLY_PRESET_SETTINGS" = "1" ]; then
|
if [ "$APPLY_PRESET_SETTINGS" = "1" ]; then
|
||||||
echo "[install] Применяю настройки модулей инстанса под пресет ${PRESET}"
|
echo "[install] Применяю настройки модулей инстанса под пресет ${PRESET}"
|
||||||
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" exec -T backend uv run python -m scripts.apply_preset_settings --force
|
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" exec -T backend uv run --no-sync python -m scripts.apply_preset_settings --force
|
||||||
else
|
else
|
||||||
echo "[install] Настройки модулей инстанса НЕ изменены — сохранены ручные правки администратора"
|
echo "[install] Настройки модулей инстанса НЕ изменены — сохранены ручные правки администратора"
|
||||||
fi
|
fi
|
||||||
|
|||||||
Reference in New Issue
Block a user