in demo-website/src/meeting.js [945:992]
layoutVideoTilesActiveSpeaker(visibleTileIndices, activeTileId) {
const tileArea = document.getElementById('tile-area');
const width = tileArea.clientWidth;
const height = tileArea.clientHeight;
const widthToHeightAspectRatio = 16 / 9;
const maximumRelativeHeightOfOthers = 0.3;
const activeWidth = width;
const activeHeight = width / widthToHeightAspectRatio;
const othersCount = visibleTileIndices.length - 1;
let othersWidth = width / othersCount;
let othersHeight = width / widthToHeightAspectRatio;
if (othersHeight / activeHeight > maximumRelativeHeightOfOthers) {
othersHeight = activeHeight * maximumRelativeHeightOfOthers;
othersWidth = othersHeight * widthToHeightAspectRatio;
}
if (othersCount === 0) {
othersHeight = 0;
}
const totalHeight = activeHeight + othersHeight;
const othersTotalWidth = othersWidth * othersCount;
const othersXOffset = width / 2 - othersTotalWidth / 2;
const activeYOffset = height / 2 - totalHeight / 2;
const othersYOffset = activeYOffset + activeHeight;
let othersIndex = 0;
for (let i = 0; i < visibleTileIndices.length; i++) {
const tileIndex = visibleTileIndices[i];
const tileId = this.tileIndexToTileId[tileIndex];
let x = 0,
y = 0,
w = 0,
h = 0;
if (tileId === activeTileId) {
x = 0;
y = activeYOffset;
w = activeWidth;
h = activeHeight;
} else {
x = othersXOffset + othersIndex * othersWidth;
y = othersYOffset;
w = othersWidth;
h = othersHeight;
othersIndex += 1;
}
this.updateTilePlacement(tileIndex, x, y, w, h);
}
}