Layout works when window is resized, otherwise sometimes it doesn't

[siaw23-retired]

Hi @aullman,

I got the library to work but run into this problem where sometimes when I enter the page with video, the video appears smaller on the top-left part of the window, only upon resizing the window that the video element fills up the screen. Why's that?

These are the options I'm using:

  let opts = {
      maxRatio: 3 / 2,
     minRatio:  9 / 16,
     fixedRatio:  false,
      scaleLastRow: true, 
      maxWidth: Infinity,        // The maximum width of the elements
      maxHeight: Infinity,       // The maximum height of the elements
      smallMaxWidth: Infinity,   // The maximum width of the small elements
      smallMaxHeight: Infinity,  // The maximum height of the small elements
      bigMaxWidth: Infinity,     // The maximum width of the big elements
      bigMaxHeight: Infinity,
      alignItems: 'center', 
      bigClass: 'OT_big',
      smallClass:'OT_small',
      bigPercentage: 0.8,
      bigFixedRatio: false,
      bigMaxRatio: 3 / 2,
      bigMinRatio: 9 / 16,
      bigFirst:  true,
      animate: true
  }

This is how I'm calling "layout". With this I expect that when the page opens with a video it fills the screen immediately.

  let layoutContainer = document.getElementById("layout");
  let layout = initLayoutContainer(layoutContainer, opts).layout;
  layout();
 

  var resizeTimeout;
  window.onresize = function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function () {
      layout();
    }, 20);
  };

Also, I see classes like "OT_bar OT_edge-bar-item OT_mode-auto" in the demo app where are they coming from? And why don't I see the "ot-layout" class that the library is supposed to add?

[travhow99]

@siaw23 The classes OT_bar OT_edge-bar-item OT_mode-auto all come from OpenTok itself. You can ignore default UI or specific aspects of it when you subscribe to or publish the stream: https://tokbox.com/developer/sdks/js/reference/Session.html#subscribe

[aullman]

You will also need to call layout again every time a new participant is added to the room and you subscribe to them.
https://github.com/aullman/opentok-layout-js#using-in-an-opentok-application