fix(room): круглая иконка участника вместо эллипса

Размер аватара при выключенной камере считался как width/height в процентах
от РАЗНЫХ сторон плитки, а круглым `.avatar` делает только border-radius —
на неквадратной плитке (то есть почти всегда) получался эллипс. Плюс
max-*: 96px не давал иконке вырасти на большой плитке фокуса.

Размер теперь берётся от узкой стороны плитки через container-запросы:
контейнером объявлен .lk-participant-placeholder (он position: absolute с
inset: 0, то есть повторяет плитку и уже имеет обе размерности), аватар —
width в cqmin с aspect-ratio: 1. Крупная плитка — 50cqmin, миниатюры
карусели — во всю узкую сторону минус 5px с каждого края.

Контейнер именно на placeholder-обёртке, а не на самой плитке: size
containment на плитке отрезал бы её содержимое (видео, метаданные) от
влияния на авторазмер.
This commit is contained in:
2026-07-28 04:23:10 +03:00
parent c5b241ae02
commit 975763a3a6

View File

@@ -518,17 +518,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); }
/* ---------- Аватар вместо иконки-заглушки при выключенной камере ---------- */
/* ---------- Аватар вместо иконки-заглушки при выключенной камере ----------
* Размер считается от УЗКОЙ стороны плитки, а не от ширины и высоты по
* отдельности. Раньше здесь было `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 {
width: 40%;
height: 40%;
width: 50cqmin;
height: auto;
aspect-ratio: 1;
min-width: 32px;
min-height: 32px;
max-width: 96px;
max-height: 96px;
font-size: clamp(12px, 3vw, 28px);
min-height: 0;
max-width: none;
max-height: none;
font-size: clamp(12px, 20cqmin, 44px);
font-weight: 700;
}
.lk-carousel .room-tile-avatar {
width: calc(100cqmin - 10px);
font-size: clamp(12px, 34cqmin, 28px);
}
.room-loader, .room-error {
display: flex;