updateTilePlacement()

in demo-website/src/meeting.js [994:1033]


    updateTilePlacement(tileIndex, x, y, w, h) {
        const tile = document.getElementById(`tile-${tileIndex}`);
        const insetWidthSize = 4;
        const insetHeightSize = insetWidthSize / (16 / 9);
        tile.style.position = 'absolute';
        tile.style.left = `${x + insetWidthSize}px`;
        tile.style.top = `${y + insetHeightSize}px`;
        tile.style.width = `${w - insetWidthSize * 2}px`;
        tile.style.height = `${h - insetHeightSize * 2}px`;
        tile.style.margin = '0';
        tile.style.padding = '0';
        tile.style.visibility = 'visible';
        const video = document.getElementById(`video-${tileIndex}`);
        if (video) {
            video.style.position = 'absolute';
            video.style.left = '0';
            video.style.top = '0';
            video.style.width = `${w}px`;
            video.style.height = `${h}px`;
            video.style.margin = '0';
            video.style.padding = '0';
            video.style.borderRadius = '8px';
        }
        const nameplate = document.getElementById(`nameplate-${tileIndex}`);
        const nameplateSize = 24;
        const nameplatePadding = 10;
        nameplate.style.position = 'absolute';
        nameplate.style.left = '0px';
        nameplate.style.top = `${h - nameplateSize - nameplatePadding}px`;
        nameplate.style.height = `${nameplateSize}px`;
        nameplate.style.width = `${w}px`;
        nameplate.style.margin = '0';
        nameplate.style.padding = '0';
        nameplate.style.paddingLeft = `${nameplatePadding}px`;
        nameplate.style.color = '#fff';
        nameplate.style.backgroundColor = 'rgba(0,0,0,0)';
        nameplate.style.textShadow = '0px 0px 5px black';
        nameplate.style.letterSpacing = '0.1em';
        nameplate.style.fontSize = `${nameplateSize - 6}px`;
    }