opentok-react-layout/dist/index.js

[](https://badge.fury.io/js/opentok-react-layout)

import "./index.css";
export const updateLayout = streams => {
  const eles = document.getElementsByClassName("OTSubscriberContainer");
  let counter = 0;
  const no_user_connected = streams.length;
  Array.from(eles).forEach((element, i) => {
    counter++;
    element.style.width = no_user_connected > 1 ? "49%" : "100%";
    element.style.height = no_user_connected > 2 ? `${100 / Math.ceil(no_user_connected / 2) - 1}vh` : "100vh";
    element.style.left = i % 2 === 0 ? i > 1 && counter === no_user_connected ? "25%" : 0 : "51%";
    element.style.bottom = no_user_connected > 2 ? "6px" : 0;
    element.style.top = !(no_user_connected % 2 === 0 ? no_user_connected - 1 <= counter && no_user_connected + 1 >= counter : no_user_connected - 1 <= i && no_user_connected + 1 >= i) && (no_user_connected > 2 && counter > 2 ? `${100 / Math.ceil(no_user_connected / 2) * Math.floor(i / 2)}%` : "0%");
    element.style.margin = "0px 0px 0px 0px";
    element.style.transition = "all 500ms ease";
  });
};