max_ronzhin/vidconf
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(room): кнопка демонстрации экрана в мини-окне

Browse Source 
В Document PiP (Chrome/Edge) своего тулбара нет, и начать демонстрацию,
не свернув мини-окно, было нельзя. Кнопка сделана по образцу кнопки
микрофона, добавленной в 0.0.15: тот же `useTrackToggle` через
`RoomContext`, поэтому она и кнопка основного тулбара — два вида одного
состояния и рассинхрону взяться неоткуда.

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

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

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

В Safari мини-окно — нативный video-PiP без собственного DOM, кнопке там
негде жить; в Firefox мини-окна нет вовсе. Это ограничение платформы.
This commit is contained in:
Ронжин Максим
2026-08-04 21:13:27 +03:00
parent aee76329c4
commit f89bf1ad64
4 changed files with 139 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/styles/room.css
View File

@@ -133,18 +133,40 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
* `.stage-tiles` в основном окне) плюс подстраховочный `min-height`, чтобы
* плитка не схлопывалась, если видео ещё не выдало реальные размеры.
*/
.room-single-tile { position: relative; flex: 1; min-height: 0; display: flex; }
.room-single-tile {
position: relative;
flex: 1;
min-height: 0;
display: flex;
/* Ширина ряда кнопок мини-плеера (`.room-pip-controls`): две круглые кнопки
по 36px плюс зазор. Живёт на общем предке, а не на самом ряду, потому что
от неё считается и отступ плашки с именем участника — иначе подпись
(«Второй участник — демонстрация экрана») уезжает ПОД кнопки. Появится
третья кнопка — правится одно число, а не два места. */
--room-pip-controls-width: calc(2 * 36px + 0.375rem);
}
.room-single-tile .lk-participant-tile { flex: 1; min-height: 220px; width: 100%; }
/* Библиотечная плашка с именем прижата к обоим нижним углам (`left: 4px;
right: 4px`) и потому начинается ровно там, где лежат наши кнопки. Сдвигаем
её содержимое вправо на ширину ряда — сама плашка прозрачная, подпись внутри
со своим фоном, так что двигать надо именно отступ, а не `left`. */
.room-single-tile .lk-participant-metadata { padding-left: var(--room-pip-controls-width); }
/* Кнопка микрофона мини-плеера (задача A5) — своего тулбара в PiP нет,
кнопка лежит поверх единственной плитки левым нижним углом (правый занят
штатным `.lk-focus-toggle-button`/нашей булавкой закрепления — тут её нет,
в PiP закреплять нечего, но геометрия зеркалит `.room-pin-toggle`). */
.room-pip-mic-toggle {
/* Кнопки мини-плеера (микрофон — задача A5, демонстрация экрана — 0.0.29):
своего тулбара в PiP нет, кнопки лежат поверх единственной плитки левым
нижним углом (правый занят штатным `.lk-focus-toggle-button`/нашей булавкой
закрепления — тут её нет, в PiP закреплять нечего, но геометрия зеркалит
`.room-pin-toggle`). Ряд, а не две абсолютно спозиционированные кнопки:
так добавление третьей не потребует пересчёта координат. */
.room-pip-controls {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
z-index: 5;
display: flex;
gap: 0.375rem;
}
.room-pip-btn {
width: 36px;
height: 36px;
border-radius: 50%;
@@ -152,12 +174,16 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
display: flex;
align-items: center;
justify-content: center;
background: var(--color-room-mic-on);
color: #10331f;
cursor: pointer;
}
.room-pip-mic-toggle svg { width: 18px; height: 18px; }
.room-pip-btn svg { width: 18px; height: 18px; }
.room-pip-mic-toggle { background: var(--color-room-mic-on); color: #10331f; }
.room-pip-mic-toggle.is-off { background: var(--color-room-danger-bg); color: #fff; }
/* Демонстрация — «выключено» это нейтральное состояние (не тревога, в отличие
от снятого микрофона), поэтому неактивная кнопка тёмная под цвет плитки, а
активная подсвечена тем же зелёным, что включённый микрофон. */
.room-pip-share-toggle { background: var(--color-room-tile-hover); color: var(--color-room-text-primary); }
.room-pip-share-toggle.is-on { background: var(--color-room-mic-on); color: #10331f; }
/*
* ---------- Колонка миниатюр (кнопка «Скрыть» + карусель) ----------