layoutVideoTilesActiveSpeaker()

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);
        }
    }