import { t } from '../../i18n/index.js';
import { LEG_STATE } from '../../group/groupCallMedia.js';
import { gridLayout, spotlightLayout, TILE_GAP } from './callLayout.js';
// Group call surfaces: the ringing prompt, the tile grid, the control bar and
// the minimized dock.
//
// It is deliberately the same visual language as the 1:1 call (CallUI.jsx) —
// same icons, same control discs, same encrypted badge — because it is the same
// thing happening more than once, and a second design would suggest otherwise.
// What it adds is the part a group call has and a 1:1 call does not: a tile per
// member, each carrying that member's own connection state, because in a mesh
// call the connection is per pair and "the call is fine" is not a thing anybody
// can say on behalf of everyone else.
//
// Purely presentational. All media and all signalling live in GroupCallMedia
// and GroupSession; this reads a snapshot and calls back.
const h = (...args) => React.createElement(...args);
const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
const ICON = {
lock: '${inner} ` },
});
const ctrlBase = {
width: '56px', height: '56px', borderRadius: '50%', display: 'grid', placeItems: 'center',
border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.05)',
color: '#cfcfd4', cursor: 'pointer', transition: 'all .15s',
};
const dangerCtrl = { ...ctrlBase, background: '#e5484d', color: '#fff', border: '1px solid transparent' };
const endBtn = {
width: '56px', height: '56px', borderRadius: '50%', display: 'grid', placeItems: 'center',
border: 'none', background: '#e5484d', color: '#fff', cursor: 'pointer',
boxShadow: '0 8px 24px rgba(229,72,77,0.35)', transition: 'transform .15s',
};
const minimizeBtn = {
width: '36px', height: '36px', borderRadius: '9px', display: 'grid', placeItems: 'center',
border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(0,0,0,0.35)',
color: '#fff', cursor: 'pointer', transition: 'all .15s',
};
const QUALITY = {
excellent: { bars: 4, color: '#3ecf8e' },
good: { bars: 3, color: '#3ecf8e' },
fair: { bars: 2, color: '#e3c84e' },
poor: { bars: 1, color: '#e5727a' },
};
function qualityBars(quality) {
const q = QUALITY[quality];
if (!q) return null;
return h('span', { key: 'q', style: { display: 'inline-flex', alignItems: 'flex-end', gap: '2px', height: '12px' } },
[0, 1, 2, 3].map((i) => h('span', {
key: i,
style: {
width: '2.5px', height: (4 + i * 2.6) + 'px', borderRadius: '1px',
background: i < q.bars ? q.color : 'rgba(255,255,255,0.18)',
},
})));
}
function initials(name) {
const words = String(name || '').trim().split(/\s+/).filter(Boolean);
return ((words[0]?.[0] || '') + (words[1]?.[0] || words[0]?.[1] || '')).toUpperCase() || '#';
}
const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
/**
* The size of an element, kept current as it changes.
*
* The layout above needs real numbers, and the only honest source of those is
* the element itself: the window's size says nothing about a panel inside a
* sidebar layout, and a call that is resized — a window dragged wider, a phone
* turned — has to re-solve rather than keep the size it was born with.
*/
function useMeasuredSize() {
const [size, setSize] = React.useState({ w: 0, h: 0 });
// A CALLBACK ref, not an object one, and this is the whole point of the hook.
//
// With `useRef` the effect's only dependency is the ref object, which never
// changes — so the effect runs exactly once, on mount. The element it wants
// to measure is inside a branch that mount does not always render: whoever
// JOINS a call sees the "somebody is calling" prompt first, and there is no
// stage in it. Their effect ran against `null`, never ran again, and the
// size stayed 0×0 for the rest of the call while the person who STARTED the
// call — mounted straight into the grid — measured fine. One user saw a
// normal call and the other saw tiles collapsed to the width of their own
// labels, from the same code.
//
// A callback ref is state: React calls it when the node attaches and again
// when it detaches, so the effect re-runs the moment there is something to
// measure. It also covers the same trip through the minimized dock, which
// unmounts the stage and brings it back.
const [node, setNode] = React.useState(null);
React.useLayoutEffect(() => {
if (!node) return undefined;
const apply = () => setSize((prev) => (
prev.w === node.clientWidth && prev.h === node.clientHeight
? prev // same numbers, same object: no re-render
: { w: node.clientWidth, h: node.clientHeight }
));
apply(); // before paint, so the first frame is already laid out
if (typeof ResizeObserver === 'undefined') {
window.addEventListener('resize', apply);
return () => window.removeEventListener('resize', apply);
}
const observer = new ResizeObserver(apply);
observer.observe(node);
return () => observer.disconnect();
}, [node]);
return [setNode, size];
}
/**
* One member's tile.
*
* A tile always says what THIS leg is doing, never what the call is doing. In a
* mesh call one member can be connected while another is still being dialled,
* and a single shared status line would have to lie about one of them.
*/
function Tile({ peer, stream, self, localStream, cameraEnabled, speaking, tileW, tileH, onSelect, pinned, compact }) {
const videoRef = React.useRef(null);
const source = self ? localStream : stream;
const showVideo = self ? cameraEnabled : peer.hasVideo;
// Video only. Every tile's is MUTED and the call's audio is played by
// GroupCallMedia from elements that are not in this tree — a tile unmounts
// whenever the user opens another chat, and a call must not go silent
// because somebody looked at a different window.
React.useEffect(() => {
const el = videoRef.current;
if (!el || !source) return;
if (el.srcObject !== source) { el.muted = true; el.srcObject = source; }
const played = el.play && el.play();
if (played && played.catch) played.catch(() => {});
});
// Nothing to say about our own tile: its name already reads "You", and the
// status slot repeating it put the same word at both ends of the label row.
const statusWord = self
? null
: peer.state === LEG_STATE.ACTIVE ? null
: peer.state === LEG_STATE.UNREACHABLE ? t('groupCall.waitingLink')
: peer.state === LEG_STATE.FAILED ? t('groupCall.legFailed')
: t('groupCall.connecting');
const avatarPx = Math.max(44, Math.min(148, Math.round((tileH || 180) * 0.42)));
// The speaking ring is drawn as a border on the tile itself rather than as an
// overlay, so it cannot be covered by the video and does not change layout
// when it appears — a tile that resized every time somebody spoke would make
// the whole grid twitch.
return h('div', {
// A tile is a control as well as a picture: clicking it spotlights that
// person. Given a role and a key handler rather than wrapped in a button,
// so a is not nested inside interactive content.
role: onSelect ? 'button' : undefined,
tabIndex: onSelect ? 0 : undefined,
onClick: onSelect,
onKeyDown: onSelect ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(); } } : undefined,
title: pinned ? t('groupCall.unpin', { name: peer.name })
: onSelect ? t('groupCall.pin', { name: peer.name })
: (speaking ? t('groupCall.speaking', { name: peer.name }) : peer.name),
style: {
cursor: onSelect ? 'pointer' : 'default',
position: 'relative', borderRadius: '14px', overflow: 'hidden', background: '#141417',
border: speaking ? '2px solid #3ecf8e' : '2px solid rgba(255,255,255,0.08)',
boxShadow: speaking ? '0 0 0 3px rgba(62,207,142,0.16)' : 'none',
transition: 'border-color .12s ease, box-shadow .12s ease',
// Sized by the grid, which is the only thing that knows how much
// room there is. aspectRatio stays as the fallback for the first
// paint, before the container has been measured.
// Measured: an exact size. Unmeasured: a shape that is still a tile.
// The floor matters more than it looks — without a minimum a flex item
// can shrink to its own text, and one bad containing block turned the
// whole call into a cluster of label-sized rectangles. Measurement now
// makes the layout GOOD; it is no longer what makes it work at all.
flex: tileW ? '0 0 auto' : '1 1 260px',
minWidth: tileW ? undefined : '200px',
width: tileW ? tileW + 'px' : 'auto',
height: tileH ? tileH + 'px' : 'auto',
aspectRatio: tileH ? undefined : '16 / 9',
display: 'grid', placeItems: 'center',
},
}, [
showVideo
? h('video', {
key: 'v', ref: videoRef, autoPlay: true, muted: true, playsInline: true,
style: {
position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
transform: self ? 'scaleX(-1)' : 'none', background: '#0f0f11',
},
})
: h('div', {
key: 'av',
style: {
// Proportional to the tile: a fixed disc looks lost in a
// large tile and crowds a small one.
width: avatarPx + 'px', height: avatarPx + 'px',
borderRadius: '50%', display: 'grid', placeItems: 'center',
background: 'radial-gradient(circle at 35% 30%, #2a2a30, #161618)',
border: speaking ? '1.5px solid rgba(62,207,142,0.65)' : '1px solid rgba(255,255,255,0.1)',
color: speaking ? '#3ecf8e' : '#cfcfd4',
fontFamily: MONO, fontSize: Math.round(avatarPx * 0.3) + 'px', fontWeight: 700,
transition: 'color .12s ease, border-color .12s ease',
},
}, initials(peer.name)),
h('div', {
key: 'label',
style: {
position: 'absolute', insetInline: 0, bottom: 0, display: 'flex', alignItems: 'center',
gap: compact ? '4px' : '7px', padding: compact ? '4px 6px' : '8px 10px',
background: 'linear-gradient(0deg, rgba(0,0,0,0.7), transparent)',
},
}, [
h('span', {
key: 'n',
style: {
flex: 1, minWidth: 0, fontSize: compact ? '10.5px' : '12.5px', fontWeight: 700, color: '#f4f4f6',
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
},
}, peer.name),
speaking && h('span', {
key: 'sp', style: { flex: 'none', color: '#3ecf8e', display: 'grid', placeItems: 'center' },
}, svg(ICON.micOn, compact ? 11 : 13, 2)),
(statusWord && !compact) && h('span', {
key: 's',
style: {
flex: 'none', fontFamily: MONO, fontSize: '10.5px',
color: peer.state === LEG_STATE.FAILED ? '#e5727a' : '#9a9aa2',
},
}, statusWord),
(!self && !compact) && qualityBars(peer.quality),
]),
]);
}
/**
* The whole group-call surface.
*
* Three states, in the order they happen: a prompt when somebody else opened a
* call we have not joined, the grid while we are in it, and a dock when the user
* wants the transcript back without hanging up.
*/
export function GroupCallUI({
call, media, groupName, localStream, getRemoteStream,
onJoin, onDismiss, onLeave, onToggleMic, onToggleCamera, onFlipCamera,
}) {
// EVERY hook runs before EVERY early return below, without exception.
// Measuring the stage was added underneath one of them, so the first render
// that reached the grid ran more hooks than the render before it and React
// refused it outright (#310, "rendered more hooks than during the previous
// render") — which took the whole call down at the moment it started. The
// early returns are what make this file easy to get wrong; keeping the hooks
// in one block at the top is what makes it hard.
const [minimized, setMinimized] = React.useState(false);
const [seconds, setSeconds] = React.useState(0);
const [pinned, setPinned] = React.useState(null);
const [stageRef, stage] = useMeasuredSize();
const joined = !!call?.joined;
React.useEffect(() => {
if (!joined) { setSeconds(0); return undefined; }
const started = Date.now();
const iv = setInterval(() => setSeconds(Math.floor((Date.now() - started) / 1000)), 1000);
return () => clearInterval(iv);
}, [joined, call?.callId]);
React.useEffect(() => { if (!call) setMinimized(false); }, [!call]);
// A pin is dropped when the call ends, and when the person it points at
// leaves — otherwise the stage would spotlight somebody who is not in the
// call any more and the rest of the grid would look mysteriously short.
const present = React.useMemo(
() => new Set(['self', ...(media?.peers || []).map((p) => p.fp)]),
[media],
);
React.useEffect(() => {
if (pinned && !present.has(pinned)) setPinned(null);
}, [pinned, present]);
if (!call) return null;
const encBadge = h('span', {
key: 'enc',
style: { display: 'inline-flex', alignItems: 'center', gap: '5px', fontSize: '11.5px', fontWeight: 600, color: '#3ecf8e' },
}, [svg(ICON.lock, 12, 2), t('call.encryptedShort')]);
// ── somebody is calling the group and we have not joined ─────────────────
if (!joined) {
return h('div', {
style: {
position: 'absolute', inset: 0, zIndex: 40, display: 'flex', flexDirection: 'column',
background: 'radial-gradient(680px 460px at 50% 36%, rgba(240,137,42,0.08), transparent 70%), #0d0d0f',
animation: 'sbExpand .2s ease',
},
}, [
h('div', { key: 'top', style: { flex: 'none', padding: '16px 18px' } },
h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: '7px', fontSize: '12px', fontWeight: 600, color: '#3ecf8e' } },
[svg(ICON.lock, 13, 2), t('call.encrypted')])),
h('div', { key: 'mid', style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 24px', textAlign: 'center' } }, [
h('div', {
key: 'av',
style: {
position: 'relative', width: '112px', height: '112px', marginBottom: '26px',
display: 'grid', placeItems: 'center',
},
}, [
h('span', { key: 'p1', style: { position: 'absolute', inset: 0, borderRadius: '50%', border: '1.5px solid rgba(240,137,42,0.5)', animation: 'sbCallPulse 2s ease-out infinite' } }),
h('span', { key: 'p2', style: { position: 'absolute', inset: 0, borderRadius: '50%', border: '1.5px solid rgba(240,137,42,0.4)', animation: 'sbCallPulse 2s ease-out infinite', animationDelay: '1s' } }),
h('div', {
key: 'c',
style: {
width: '96px', height: '96px', borderRadius: '50%', display: 'grid', placeItems: 'center',
background: 'radial-gradient(circle at 35% 30%, #2a2a30, #161618)',
border: '1px solid rgba(255,255,255,0.1)', color: '#8a8a92',
},
}, svg(ICON.users, 42, 1.6)),
]),
h('div', { key: 'n', style: { fontSize: '22px', fontWeight: 800, letterSpacing: '-0.4px', color: '#f4f4f6' } }, groupName),
h('div', { key: 's', style: { fontFamily: MONO, fontSize: '13.5px', color: '#9a9aa2', marginTop: '8px' } },
call.withVideo
? t('groupCall.startedVideo', { name: call.startedByName })
: t('groupCall.startedVoice', { name: call.startedByName })),
h('div', { key: 'p', style: { fontSize: '12.5px', color: '#6b6b73', marginTop: '6px' } },
t('groupCall.inCall', { count: call.participants.length })),
]),
h('div', { key: 'ctrls', style: { flex: 'none', display: 'flex', justifyContent: 'center', gap: '48px', padding: '24px 24px 40px' } }, [
h('div', { key: 'dec', style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' } }, [
h('button', { key: 'b', onClick: onDismiss, title: t('groupCall.dismiss'), style: { ...endBtn, width: '62px', height: '62px' } }, svg(ICON.phoneHangup, 24, 1.9)),
h('span', { key: 'l', style: { fontFamily: MONO, fontSize: '10.5px', color: '#8a8a92' } }, t('groupCall.dismiss')),
]),
h('div', { key: 'acc', style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' } }, [
h('button', {
key: 'b', onClick: onJoin, title: t('groupCall.join'),
style: {
width: '62px', height: '62px', borderRadius: '50%', display: 'grid', placeItems: 'center',
border: 'none', background: '#3ecf8e', color: '#06231a', cursor: 'pointer',
boxShadow: '0 8px 24px rgba(62,207,142,0.35)',
},
}, svg(ICON.phone, 24, 1.9)),
h('span', { key: 'l', style: { fontFamily: MONO, fontSize: '10.5px', color: '#8a8a92' } }, t('groupCall.join')),
]),
]),
]);
}
const peers = media?.peers || [];
const selfTile = {
fp: 'self', name: t('groupCall.you'), state: LEG_STATE.ACTIVE,
hasVideo: media?.cameraEnabled, quality: null, speaking: media?.selfSpeaking === true,
};
// ── minimized dock ───────────────────────────────────────────────────────
if (minimized) {
// Collapsed, there are no tiles to carry the indicator, so the one line
// the dock has says who is talking instead of how long the call has run.
const speakers = peers.filter((p) => p.speaking).map((p) => p.name);
const talking = speakers.length === 1 ? speakers[0]
: speakers.length > 1 ? speakers.slice(0, 2).join(', ')
: (media?.selfSpeaking ? t('groupCall.you') : null);
return h('div', {
style: {
position: 'absolute', bottom: '18px', insetInlineEnd: '18px', zIndex: 40, width: '244px',
borderRadius: '14px', overflow: 'hidden', background: '#161618',
border: '1px solid rgba(255,255,255,0.1)', boxShadow: '0 18px 44px rgba(0,0,0,0.55)',
animation: 'sbExpand .18s ease',
},
}, [
h('div', { key: 'bar', style: { display: 'flex', alignItems: 'center', gap: '11px', padding: '11px 12px' } }, [
h('span', {
key: 'ic',
style: {
flex: 'none', width: '34px', height: '34px', borderRadius: '9px', display: 'grid',
placeItems: 'center', background: 'rgba(62,207,142,0.1)',
border: '1px solid rgba(62,207,142,0.25)', color: '#3ecf8e',
},
}, svg(ICON.users, 16, 1.9)),
h('div', { key: 'tx', style: { flex: 1, minWidth: 0 } }, [
h('div', { key: 'n', style: { fontSize: '13px', fontWeight: 700, color: '#f4f4f6', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, groupName),
h('div', {
key: 's',
style: {
fontFamily: MONO, fontSize: '11px', color: talking ? '#3ecf8e' : '#9a9aa2',
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
},
}, talking
? t('groupCall.speaking', { name: talking })
: `${t('groupCall.inCall', { count: call.participants.length })} · ${fmt(seconds)}`),
]),
h('button', { key: 'exp', onClick: () => setMinimized(false), title: t('call.expand'), style: { flex: 'none', width: '32px', height: '32px', borderRadius: '8px', display: 'grid', placeItems: 'center', border: 'none', background: 'rgba(255,255,255,0.05)', color: '#cfcfd4', cursor: 'pointer' } }, svg(ICON.expand, 15, 2)),
h('button', { key: 'end', onClick: onLeave, title: t('groupCall.leave'), style: { flex: 'none', width: '32px', height: '32px', borderRadius: '8px', display: 'grid', placeItems: 'center', border: 'none', background: '#e5484d', color: '#fff', cursor: 'pointer' } }, svg(ICON.phoneHangup, 15, 2)),
]),
]);
}
// ── the call itself ──────────────────────────────────────────────────────
const tiles = [selfTile, ...peers];
const tileFor = (id) => tiles.find((tile) => tile.fp === id) || null;
const spotlight = pinned ? tileFor(pinned) : null;
const others = spotlight ? tiles.filter((tile) => tile.fp !== spotlight.fp) : [];
const spot = spotlight ? spotlightLayout(others.length, stage.w, stage.h) : null;
// A stage too short to split honestly falls back to the gallery rather than
// rendering a main tile with no height.
const spotlit = spotlight && spot && spot.main.w > 0;
const layout = gridLayout(tiles.length, stage.w, stage.h);
const renderTile = (tile, extra = {}) => h(Tile, {
key: tile.fp,
peer: tile,
self: tile.fp === 'self',
speaking: tile.speaking === true,
localStream,
cameraEnabled: media?.cameraEnabled,
stream: tile.fp === 'self' ? null : getRemoteStream(tile.fp),
...extra,
});
return h('div', {
style: {
position: 'absolute', inset: 0, zIndex: 40, display: 'flex', flexDirection: 'column',
background: '#0a0a0c', animation: 'sbExpand .2s ease',
},
}, [
h('div', {
key: 'top',
style: {
flex: 'none', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
gap: '14px', padding: '16px 18px 10px',
},
}, [
h('div', { key: 'l', style: { minWidth: 0 } }, [
h('div', { key: 'n', style: { fontSize: '17px', fontWeight: 800, letterSpacing: '-0.3px', color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, groupName),
h('div', { key: 's', style: { display: 'inline-flex', alignItems: 'center', gap: '9px', marginTop: '4px' } }, [
h('span', { key: 'd', style: { fontFamily: MONO, fontSize: '12.5px', color: '#e8e8eb' } }, fmt(seconds)),
encBadge,
h('span', { key: 'c', style: { fontSize: '11.5px', color: '#8a8a92' } },
t('groupCall.inCall', { count: call.participants.length })),
]),
]),
h('div', { key: 'r', style: { flex: 'none', display: 'flex', alignItems: 'center', gap: '8px' } }, [
spotlit && h('button', {
key: 'grid', onClick: () => setPinned(null), title: t('groupCall.showEveryone'),
style: {
height: '36px', padding: '0 12px', borderRadius: '9px', display: 'inline-flex',
alignItems: 'center', gap: '7px', border: '1px solid rgba(255,255,255,0.15)',
background: 'rgba(0,0,0,0.35)', color: '#fff', cursor: 'pointer',
fontFamily: 'inherit', fontSize: '12.5px', fontWeight: 600,
},
}, [svg(ICON.grid, 14, 2), t('groupCall.showEveryone')]),
h('button', { key: 'min', onClick: () => setMinimized(true), title: t('call.minimize'), style: minimizeBtn }, svg(ICON.minimize, 16, 2)),
]),
]),
media?.error && h('div', {
key: 'err',
style: {
flex: 'none', margin: '0 18px 10px', padding: '9px 12px', borderRadius: '10px',
background: 'rgba(229,114,122,0.1)', border: '1px solid rgba(229,114,122,0.28)',
color: '#e5727a', fontSize: '12.5px', lineHeight: 1.5,
},
}, t(`groupCall.err.${media.error}`)),
// The stage is what gets measured, so it carries no padding of its own —
// padding would be counted as usable room and every tile would come out
// slightly too large for the space that is really there.
h('div', {
key: 'stage',
ref: stageRef,
className: 'msc-scroll',
style: {
flex: 1, minHeight: 0, minWidth: 0, overflow: 'auto',
// Breathing room as MARGIN, not padding: clientWidth counts
// padding as usable space and every tile would come out that
// much too wide for the room actually available.
margin: '0 14px 6px',
// Flex, not grid. A grid with `justify-content: center` sizes its
// column to the content, so the row's `width: 100%` had nothing
// definite to resolve against and collapsed to the widest label —
// which is exactly what the broken screenshot showed. A flex
// container keeps a definite content box either way, so a row
// asking for the full width gets the full width.
// `safe center` centres it without the clipping plain centring
// causes once the content overflows: the first row stays
// reachable and the stage scrolls as normal.
display: 'flex', alignItems: 'safe center', justifyContent: 'safe center',
},
}, spotlit
// ── spotlight: one person large, the rest in a strip underneath ──
? h('div', {
style: {
display: 'flex', flexDirection: 'column', gap: TILE_GAP + 'px',
width: '100%', height: stage.h + 'px', minHeight: 0,
},
}, [
h('div', {
key: 'main',
style: { flex: 'none', display: 'flex', justifyContent: 'center', minHeight: 0 },
}, renderTile(spotlight, {
tileW: spot.main.w, tileH: spot.main.h,
pinned: true, onSelect: () => setPinned(null),
})),
others.length > 0 && h('div', {
key: 'strip',
className: 'msc-scroll',
style: {
flex: 'none', height: spot.stripH + 'px', display: 'flex',
gap: TILE_GAP + 'px', justifyContent: others.length > 4 ? 'flex-start' : 'center',
// The strip scrolls sideways rather than shrinking: past a
// handful of people, thumbnails that keep dividing stop
// being recognisable, which is the whole point of them.
overflowX: 'auto', overflowY: 'hidden',
},
}, others.map((tile) => renderTile(tile, {
tileW: spot.thumbW, tileH: spot.stripH, compact: true,
onSelect: () => setPinned(tile.fp),
}))),
])
// ── gallery: everyone the same size ─────────────────────────────
: h('div', {
// Wrapping flex rather than a grid, for one reason: a call of three
// lays out two over one, and in a grid that lone tile is stuck in the
// first column with a hole beside it. Fixing the row width to exactly
// `cols` tiles makes the wrap land where the layout said it should,
// and a short last row centres itself.
style: {
display: 'flex', flexWrap: 'wrap', gap: TILE_GAP + 'px',
justifyContent: 'center', alignContent: 'center',
width: layout.tileW
? (layout.cols * layout.tileW + (layout.cols - 1) * TILE_GAP) + 'px'
: '100%',
},
}, tiles.map((tile) => renderTile(tile, {
tileW: layout.tileW, tileH: layout.tileH,
onSelect: () => setPinned(tile.fp),
})))),
h('div', {
key: 'ctrls',
style: {
flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '16px',
padding: '16px 20px calc(22px + var(--sb-safe-bottom, env(safe-area-inset-bottom, 0px)))',
background: 'linear-gradient(0deg, rgba(0,0,0,0.6), transparent)',
},
}, [
h('button', { key: 'mic', onClick: onToggleMic, title: t('call.mute'), style: media?.micEnabled ? ctrlBase : dangerCtrl },
svg(media?.micEnabled ? ICON.micOn : ICON.micOff, 21, 1.9)),
h('button', { key: 'cam', onClick: onToggleCamera, title: t('call.camera'), style: media?.cameraEnabled ? ctrlBase : dangerCtrl },
svg(media?.cameraEnabled ? ICON.camOn : ICON.camOff, 21, 1.8)),
media?.cameraEnabled && h('button', { key: 'flip', onClick: onFlipCamera, title: t('call.flipCamera'), style: ctrlBase }, svg(ICON.flip, 21, 1.8)),
h('button', { key: 'end', onClick: onLeave, title: t('groupCall.leave'), style: endBtn }, svg(ICON.phoneHangup, 22, 1.9)),
]),
]);
}
if (typeof window !== 'undefined') {
window.GroupCallUI = GroupCallUI;
}