Max Ronzhin
3fb3a5d42c
Раскладка сцены больше не выбирается автоматически — пользователь выбирает
один из трёх режимов:
- «Стандарт» — как раньше: крупная плитка плюс карусель остальных сбоку,
кого показать крупно, по-прежнему решает pickStageFocus;
- «Плитки» — все участники равными плитками, без выделенного крупного;
- «Живые плитки» — сетка только из тех, у кого включена камера, остальные
в карусели сбоку; если камеру не включил никто, сетка была бы пустой —
режим вырождается в «Плитки».
Демонстрация экрана перебивает выбранный режим: пока в комнате есть активный
шэр, сцена ведёт себя как «Стандарт» (смысл плиточных режимов — равноправие
участников, а демонстрация неравноправна по определению). Режим при этом
живёт в состоянии RoomPage, поэтому по завершении шэра вид сам возвращается
к выбранному.
Скрытие остальных убирает карусель, основная область занимает сцену целиком.
Скрыть можно из меню «Вид», из шторки настроек на мобильном и кнопкой прямо
над колонкой миниатюр; вернуть — кнопкой «Показать остальных (N)» на сцене,
которая видна всё время, пока кто-то скрыт. В режиме «Плитки» скрывать
нечего, переключатель там заблокирован с пояснением.
Переключатель на широком экране — кнопка «Вид» с поповером; на мобильном её
нет (тулбар там и так ужат до пяти кнопок), те же настройки идут секцией в
шторке. Видимость решается условным рендерингом в React, а не новым
CSS-правилом поверх медиазапроса — в room.css за это уже была битва
специфичности.
Режим сохраняется между заходами в комнату (localStorage, своим модулем —
LocalUserChoices у LiveKit фиксированной структуры, поля под раскладку там
нет). Скрытие не сохраняется: разовое действие по ходу разговора, войти в
новую конференцию без половины участников — сюрприз, а не удобство.
Сетка собрана своим StageGrid поверх тех же публичных хуков, что использует
GridLayout: библиотечный компонент не пробрасывает gridLayouts, а её набор
раскладок требует 560px уже для 2x2 — на телефоне это две плитки на страницу.
Свой набор даёт 2x2 от 360px и портретную 2x3. Индикатор страниц тоже свой:
PaginationControl/PaginationIndicator из пакета не экспортируются.
28 lines
1.4 KiB
TypeScript
28 lines
1.4 KiB
TypeScript
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
|
||
}
|