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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user