feat(room): выбор режима показа участников и скрытие остальных
Раскладка сцены больше не выбирается автоматически — пользователь выбирает
один из трёх режимов:
- «Стандарт» — как раньше: крупная плитка плюс карусель остальных сбоку,
кого показать крупно, по-прежнему решает pickStageFocus;
- «Плитки» — все участники равными плитками, без выделенного крупного;
- «Живые плитки» — сетка только из тех, у кого включена камера, остальные
в карусели сбоку; если камеру не включил никто, сетка была бы пустой —
режим вырождается в «Плитки».
Демонстрация экрана перебивает выбранный режим: пока в комнате есть активный
шэр, сцена ведёт себя как «Стандарт» (смысл плиточных режимов — равноправие
участников, а демонстрация неравноправна по определению). Режим при этом
живёт в состоянии RoomPage, поэтому по завершении шэра вид сам возвращается
к выбранному.
Скрытие остальных убирает карусель, основная область занимает сцену целиком.
Скрыть можно из меню «Вид», из шторки настроек на мобильном и кнопкой прямо
над колонкой миниатюр; вернуть — кнопкой «Показать остальных (N)» на сцене,
которая видна всё время, пока кто-то скрыт. В режиме «Плитки» скрывать
нечего, переключатель там заблокирован с пояснением.
Переключатель на широком экране — кнопка «Вид» с поповером; на мобильном её
нет (тулбар там и так ужат до пяти кнопок), те же настройки идут секцией в
шторке. Видимость решается условным рендерингом в React, а не новым
CSS-правилом поверх медиазапроса — в room.css за это уже была битва
специфичности.
Режим сохраняется между заходами в комнату (localStorage, своим модулем —
LocalUserChoices у LiveKit фиксированной структуры, поля под раскладку там
нет). Скрытие не сохраняется: разовое действие по ходу разговора, войти в
новую конференцию без половины участников — сюрприз, а не удобство.
Сетка собрана своим StageGrid поверх тех же публичных хуков, что использует
GridLayout: библиотечный компонент не пробрасывает gridLayouts, а её набор
раскладок требует 560px уже для 2x2 — на телефоне это две плитки на страницу.
Свой набор даёт 2x2 от 360px и портретную 2x3. Индикатор страниц тоже свой:
PaginationControl/PaginationIndicator из пакета не экспортируются.
This commit is contained in:
@@ -18,6 +18,7 @@ import { RoomToolbar } from '@/components/room/RoomToolbar'
|
||||
import { ChatPanel } from '@/components/room/ChatPanel'
|
||||
import { DeviceSettingsDialog } from '@/components/room/DeviceSettingsDialog'
|
||||
import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
|
||||
import { loadStageLayoutMode, saveStageLayoutMode, type StageLayoutMode } from '@/lib/stageLayoutMode'
|
||||
|
||||
interface RoomJoinState {
|
||||
livekitUrl: string
|
||||
@@ -150,6 +151,23 @@ export function RoomPage() {
|
||||
const pip = useRoomPiP(roomRootRef)
|
||||
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)
|
||||
}, [])
|
||||
|
||||
// Сохранённый выбор устройств — читаем через собственный вызов
|
||||
// usePersistentUserChoices (независимый от того, что использует
|
||||
// DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
|
||||
@@ -218,7 +236,12 @@ export function RoomPage() {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<RoomStage />
|
||||
<RoomStage
|
||||
layoutMode={layoutMode}
|
||||
hideOthers={hideOthers}
|
||||
onShowOthers={() => setHideOthers(false)}
|
||||
onHideOthers={() => setHideOthers(true)}
|
||||
/>
|
||||
)}
|
||||
{chatVisible && chatOpen && (
|
||||
<ChatPanel
|
||||
@@ -242,9 +265,21 @@ export function RoomPage() {
|
||||
pipSupported={pip.supported}
|
||||
pipActive={pip.active}
|
||||
onTogglePiP={pip.toggle}
|
||||
layoutMode={layoutMode}
|
||||
onLayoutModeChange={handleLayoutModeChange}
|
||||
hideOthers={hideOthers}
|
||||
onHideOthersChange={setHideOthers}
|
||||
/>
|
||||
</div>
|
||||
{settingsOpen && <DeviceSettingsDialog onClose={() => setSettingsOpen(false)} />}
|
||||
{settingsOpen && (
|
||||
<DeviceSettingsDialog
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
layoutMode={layoutMode}
|
||||
onLayoutModeChange={handleLayoutModeChange}
|
||||
hideOthers={hideOthers}
|
||||
onHideOthersChange={setHideOthers}
|
||||
/>
|
||||
)}
|
||||
{/* Портал внутрь LiveKitRoom (не как сосед снаружи!) — RoomStage,
|
||||
рендерящийся в PiP-окне, продолжает читать RoomContext/треки.
|
||||
`variant="pip"` — мини-плеер
|
||||
|
||||
Reference in New Issue
Block a user