opentok-layout-js - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

bower.json

 {
   "name": "opentok-layout-js",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "homepage": "https://github.com/aullman/opentok-layout-js",
@@ -5,0 +5,0 @@ "authors": [

opentok-layout.js

@@ -196,15 +196,18 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-module.exports = function (opts, ratios) {
-  var _opts$maxRatio = opts.maxRatio,
-      maxRatio = _opts$maxRatio === undefined ? 3 / 2 : _opts$maxRatio,
-      _opts$minRatio = opts.minRatio,
-      minRatio = _opts$minRatio === undefined ? 9 / 16 : _opts$minRatio,
-      _opts$fixedRatio = opts.fixedRatio,
-      fixedRatio = _opts$fixedRatio === undefined ? false : _opts$fixedRatio,
-      _opts$containerWidth = opts.containerWidth,
-      containerWidth = _opts$containerWidth === undefined ? 640 : _opts$containerWidth,
-      _opts$containerHeight = opts.containerHeight,
-      containerHeight = _opts$containerHeight === undefined ? 480 : _opts$containerHeight;
+var getLayout = function getLayout(opts, elements) {
+  var maxRatio = opts.maxRatio,
+      minRatio = opts.minRatio,
+      fixedRatio = opts.fixedRatio,
+      containerWidth = opts.containerWidth,
+      containerHeight = opts.containerHeight,
+      _opts$offsetLeft = opts.offsetLeft,
+      offsetLeft = _opts$offsetLeft === undefined ? 0 : _opts$offsetLeft,
+      _opts$offsetTop = opts.offsetTop,
+      offsetTop = _opts$offsetTop === undefined ? 0 : _opts$offsetTop;
 
+  var ratios = elements.map(function (element) {
+    return element.height / element.width;
+  });
   var count = ratios.length;
+
   var dimensions = void 0;
@@ -305,5 +308,4 @@
       boxes.push({
-        aspectRatio: _ratio2,
-        left: x,
-        top: y,
+        left: x + offsetLeft,
+        top: y + offsetTop,
         width: _targetWidth,
@@ -319,2 +321,142 @@ height: _targetHeight
 
+var getVideoRatio = function getVideoRatio(element) {
+  return element.height / element.width;
+};
+
+module.exports = function (opts, elements) {
+  console.log('getLayout', opts, elements);
+  var _opts$maxRatio = opts.maxRatio,
+      maxRatio = _opts$maxRatio === undefined ? 3 / 2 : _opts$maxRatio,
+      _opts$minRatio = opts.minRatio,
+      minRatio = _opts$minRatio === undefined ? 9 / 16 : _opts$minRatio,
+      _opts$fixedRatio = opts.fixedRatio,
+      fixedRatio = _opts$fixedRatio === undefined ? false : _opts$fixedRatio,
+      _opts$bigPercentage = opts.bigPercentage,
+      bigPercentage = _opts$bigPercentage === undefined ? 0.8 : _opts$bigPercentage,
+      _opts$bigFixedRatio = opts.bigFixedRatio,
+      bigFixedRatio = _opts$bigFixedRatio === undefined ? false : _opts$bigFixedRatio,
+      _opts$bigMaxRatio = opts.bigMaxRatio,
+      bigMaxRatio = _opts$bigMaxRatio === undefined ? 3 / 2 : _opts$bigMaxRatio,
+      _opts$bigMinRatio = opts.bigMinRatio,
+      bigMinRatio = _opts$bigMinRatio === undefined ? 9 / 16 : _opts$bigMinRatio,
+      _opts$bigFirst = opts.bigFirst,
+      bigFirst = _opts$bigFirst === undefined ? true : _opts$bigFirst,
+      _opts$containerWidth = opts.containerWidth,
+      containerWidth = _opts$containerWidth === undefined ? 640 : _opts$containerWidth,
+      _opts$containerHeight = opts.containerHeight,
+      containerHeight = _opts$containerHeight === undefined ? 480 : _opts$containerHeight;
+
+
+  var availableRatio = containerHeight / containerWidth;
+  var offsetLeft = 0;
+  var offsetTop = 0;
+  var bigOffsetTop = 0;
+  var bigOffsetLeft = 0;
+  var bigIndices = [];
+  var bigOnes = elements.filter(function (element, idx) {
+    if (element.big) {
+      bigIndices.push(idx);
+      return true;
+    }
+    return false;
+  });
+  var smallOnes = elements.filter(function (element) {
+    return !element.big;
+  });
+  var bigBoxes = [];
+  var smallBoxes = [];
+  if (bigOnes.length > 0 && smallOnes.length > 0) {
+    var bigWidth = void 0;
+    var bigHeight = void 0;
+
+    if (availableRatio > getVideoRatio(bigOnes[0])) {
+      // We are tall, going to take up the whole width and arrange small
+      // guys at the bottom
+      bigWidth = containerWidth;
+      bigHeight = Math.floor(containerHeight * bigPercentage);
+      offsetTop = bigHeight;
+      bigOffsetTop = containerHeight - offsetTop;
+    } else {
+      // We are wide, going to take up the whole height and arrange the small
+      // guys on the right
+      bigHeight = containerHeight;
+      bigWidth = Math.floor(containerWidth * bigPercentage);
+      offsetLeft = bigWidth;
+      bigOffsetLeft = containerWidth - offsetLeft;
+    }
+    if (bigFirst) {
+      bigBoxes = getLayout({
+        containerWidth: bigWidth,
+        containerHeight: bigHeight,
+        offsetLeft: 0,
+        offsetTop: 0,
+        fixedRatio: bigFixedRatio,
+        minRatio: bigMinRatio,
+        maxRatio: bigMaxRatio
+      }, bigOnes);
+      smallBoxes = getLayout({
+        containerWidth: containerWidth - offsetLeft,
+        containerHeight: containerHeight - offsetTop,
+        offsetLeft: offsetLeft,
+        offsetTop: offsetTop,
+        fixedRatio: fixedRatio,
+        minRatio: minRatio,
+        maxRatio: maxRatio
+      }, smallOnes);
+    } else {
+      smallBoxes = getLayout({
+        containerWidth: containerWidth - offsetLeft,
+        containerHeight: containerHeight - offsetTop,
+        offsetLeft: 0,
+        offsetTop: 0,
+        fixedRatio: fixedRatio,
+        minRatio: minRatio,
+        maxRatio: maxRatio
+      }, smallOnes);
+      bigBoxes = getLayout({
+        containerWidth: bigWidth,
+        containerHeight: bigHeight,
+        offsetLeft: bigOffsetLeft,
+        offsetTop: bigOffsetTop,
+        fixedRatio: bigFixedRatio,
+        minRatio: bigMinRatio
+      }, bigOnes);
+    }
+  } else if (bigOnes.length > 0 && smallOnes.length === 0) {
+    // We only have one bigOne just center it
+    bigBoxes = getLayout({
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      fixedRatio: bigFixedRatio,
+      minRatio: bigMinRatio,
+      maxRatio: bigMaxRatio
+    }, bigOnes);
+  } else {
+    smallBoxes = getLayout({
+      containerWidth: containerWidth - offsetLeft,
+      containerHeight: containerHeight - offsetTop,
+      offsetLeft: offsetLeft,
+      offsetTop: offsetTop,
+      fixedRatio: fixedRatio,
+      minRatio: minRatio,
+      maxRatio: maxRatio
+    }, smallOnes);
+  }
+
+  var boxes = [];
+  var bigBoxesIdx = 0;
+  var smallBoxesIdx = 0;
+  // Rebuild the array in the right order based on where the bigIndices should be
+  elements.forEach(function (element, idx) {
+    if (bigIndices.indexOf(idx) > -1) {
+      boxes[idx] = bigBoxes[bigBoxesIdx];
+      bigBoxesIdx += 1;
+    } else {
+      boxes[idx] = smallBoxes[smallBoxesIdx];
+      smallBoxesIdx += 1;
+    }
+  });
+  return boxes;
+};
+
 /***/ }),
@@ -411,14 +553,22 @@ /* 2 */
 
-var getVideoRatio = function getVideoRatio(elem) {
-  if (!elem) {
-    return 3 / 4;
+var getChildDims = function getChildDims(child) {
+  if (child) {
+    var video = child.querySelector('video');
+    if (video && video.videoHeight && video.videoWidth) {
+      return {
+        height: video.videoHeight,
+        width: video.videoWidth
+      };
+    }
+    if (child.videoHeight && child.videoWidth) {
+      return {
+        height: child.videoHeight,
+        width: child.videoWidth
+      };
+    }
   }
-  var video = elem.querySelector('video');
-  if (video && video.videoHeight && video.videoWidth) {
-    return video.videoHeight / video.videoWidth;
-  }
-  if (elem.videoHeight && elem.videoWidth) {
-    return elem.videoHeight / elem.videoWidth;
-  }
-  return 3 / 4;
+  return {
+    height: 480,
+    width: 640
+  };
 };
@@ -446,49 +596,7 @@
 
-var arrange = function arrange(children, containerWidth, containerHeight, offsetLeft, offsetTop, fixedRatio, minRatio, maxRatio, animate) {
-  var boxes = getLayout({
-    containerWidth: containerWidth,
-    containerHeight: containerHeight,
-    minRatio: minRatio,
-    maxRatio: maxRatio,
-    fixedRatio: fixedRatio
-  }, children.map(function (child) {
-    return getVideoRatio(child);
-  }));
-
-  boxes.forEach(function (box, idx) {
-    var elem = children[idx];
-    css(elem, 'position', 'absolute');
-    var actualWidth = box.width - getCSSNumber(elem, 'paddingLeft') - getCSSNumber(elem, 'paddingRight') - getCSSNumber(elem, 'marginLeft') - getCSSNumber(elem, 'marginRight') - getCSSNumber(elem, 'borderLeft') - getCSSNumber(elem, 'borderRight');
-
-    var actualHeight = box.height - getCSSNumber(elem, 'paddingTop') - getCSSNumber(elem, 'paddingBottom') - getCSSNumber(elem, 'marginTop') - getCSSNumber(elem, 'marginBottom') - getCSSNumber(elem, 'borderTop') - getCSSNumber(elem, 'borderBottom');
-
-    positionElement(elem, box.left + offsetLeft, box.top + offsetTop, actualWidth, actualHeight, animate);
-  });
-};
-
 module.exports = function (container, opts) {
-  var _opts$maxRatio = opts.maxRatio,
-      maxRatio = _opts$maxRatio === undefined ? 3 / 2 : _opts$maxRatio,
-      _opts$minRatio = opts.minRatio,
-      minRatio = _opts$minRatio === undefined ? 9 / 16 : _opts$minRatio,
-      _opts$fixedRatio = opts.fixedRatio,
-      fixedRatio = _opts$fixedRatio === undefined ? false : _opts$fixedRatio,
-      _opts$animate = opts.animate,
+  var _opts$animate = opts.animate,
       animate = _opts$animate === undefined ? false : _opts$animate,
       _opts$bigClass = opts.bigClass,
-      bigClass = _opts$bigClass === undefined ? 'OT_big' : _opts$bigClass,
-      _opts$bigPercentage = opts.bigPercentage,
-      bigPercentage = _opts$bigPercentage === undefined ? 0.8 : _opts$bigPercentage,
-      _opts$bigFixedRatio = opts.bigFixedRatio,
-      bigFixedRatio = _opts$bigFixedRatio === undefined ? false : _opts$bigFixedRatio,
-      _opts$bigMaxRatio = opts.bigMaxRatio,
-      bigMaxRatio = _opts$bigMaxRatio === undefined ? 3 / 2 : _opts$bigMaxRatio,
-      _opts$bigMinRatio = opts.bigMinRatio,
-      bigMinRatio = _opts$bigMinRatio === undefined ? 9 / 16 : _opts$bigMinRatio,
-      _opts$bigFirst = opts.bigFirst,
-      bigFirst = _opts$bigFirst === undefined ? true : _opts$bigFirst;
-  var _opts$containerWidth = opts.containerWidth,
-      containerWidth = _opts$containerWidth === undefined ? 640 : _opts$containerWidth,
-      _opts$containerHeight = opts.containerHeight,
-      containerHeight = _opts$containerHeight === undefined ? 480 : _opts$containerHeight;
+      bigClass = _opts$bigClass === undefined ? 'OT_big' : _opts$bigClass;
 
@@ -505,44 +613,22 @@
 
-  containerHeight = getHeight(container) - getCSSNumber(container, 'borderTop') - getCSSNumber(container, 'borderBottom');
-  containerWidth = getWidth(container) - getCSSNumber(container, 'borderLeft') - getCSSNumber(container, 'borderRight');
-  var availableRatio = containerHeight / containerWidth;
-  var offsetLeft = 0;
-  var offsetTop = 0;
-  var bigOffsetTop = 0;
-  var bigOffsetLeft = 0;
-  var bigOnes = Array.prototype.filter.call(container.querySelectorAll('#' + id + '>.' + bigClass), filterDisplayNone);
-  var smallOnes = Array.prototype.filter.call(container.querySelectorAll('#' + id + '>*:not(.' + bigClass + ')'), filterDisplayNone);
+  opts.containerHeight = getHeight(container) - getCSSNumber(container, 'borderTop') - getCSSNumber(container, 'borderBottom');
+  opts.containerWidth = getWidth(container) - getCSSNumber(container, 'borderLeft') - getCSSNumber(container, 'borderRight');
 
-  if (bigOnes.length > 0 && smallOnes.length > 0) {
-    var bigWidth = void 0;
-    var bigHeight = void 0;
+  var children = Array.prototype.filter.call(container.querySelectorAll('#' + id + '>*'), filterDisplayNone);
+  var elements = children.map(function (element) {
+    var res = getChildDims(element);
+    res.big = element.classList.contains(bigClass);
+    return res;
+  });
 
-    if (availableRatio > getVideoRatio(bigOnes[0])) {
-      // We are tall, going to take up the whole width and arrange small
-      // guys at the bottom
-      bigWidth = containerWidth;
-      bigHeight = Math.floor(containerHeight * bigPercentage);
-      offsetTop = bigHeight;
-      bigOffsetTop = containerHeight - offsetTop;
-    } else {
-      // We are wide, going to take up the whole height and arrange the small
-      // guys on the right
-      bigHeight = containerHeight;
-      bigWidth = Math.floor(containerWidth * bigPercentage);
-      offsetLeft = bigWidth;
-      bigOffsetLeft = containerWidth - offsetLeft;
-    }
-    if (bigFirst) {
-      arrange(bigOnes, bigWidth, bigHeight, 0, 0, bigFixedRatio, bigMinRatio, bigMaxRatio, animate);
-      arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, offsetLeft, offsetTop, fixedRatio, minRatio, maxRatio, animate);
-    } else {
-      arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, 0, 0, fixedRatio, minRatio, maxRatio, animate);
-      arrange(bigOnes, bigWidth, bigHeight, bigOffsetLeft, bigOffsetTop, bigFixedRatio, bigMinRatio, bigMaxRatio, animate);
-    }
-  } else if (bigOnes.length > 0 && smallOnes.length === 0) {
-    // We only have one bigOne just center it
-    arrange(bigOnes, containerWidth, containerHeight, 0, 0, bigFixedRatio, bigMinRatio, bigMaxRatio, animate);
-  } else {
-    arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, offsetLeft, offsetTop, fixedRatio, minRatio, maxRatio, animate);
-  }
+  var boxes = getLayout(opts, elements);
+  boxes.forEach(function (box, idx) {
+    var elem = children[idx];
+    css(elem, 'position', 'absolute');
+    var actualWidth = box.width - getCSSNumber(elem, 'paddingLeft') - getCSSNumber(elem, 'paddingRight') - getCSSNumber(elem, 'marginLeft') - getCSSNumber(elem, 'marginRight') - getCSSNumber(elem, 'borderLeft') - getCSSNumber(elem, 'borderRight');
+
+    var actualHeight = box.height - getCSSNumber(elem, 'paddingTop') - getCSSNumber(elem, 'paddingBottom') - getCSSNumber(elem, 'marginTop') - getCSSNumber(elem, 'marginBottom') - getCSSNumber(elem, 'borderTop') - getCSSNumber(elem, 'borderBottom');
+
+    positionElement(elem, box.left, box.top, actualWidth, actualHeight, animate);
+  });
 };
@@ -549,0 +635,0 @@

opentok-layout.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.initLayoutContainer=e():t.initLayoutContainer=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function o(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(i,r,function(e){return t[e]}.bind(null,r));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){"use strict";
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.initLayoutContainer=e():t.initLayoutContainer=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(o,n,function(e){return t[e]}.bind(null,n));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";
 /*!
@@ -11,3 +11,3 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
  *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
- * */var i=o(1),r=o(2);t.exports=function(t,e){return t="string"==typeof t?document.querySelector(t):t,"undefined"==typeof HTMLElement||t instanceof HTMLElement||e?e||(e={}):e=t,{layout:r.bind(this,t,e),getLayout:i.bind(this,e)}}},function(t,e,o){"use strict";var i=function(t,e,o,i,r){for(var n=void 0,a=void 0,d=void 0,f=void 0,u=void 0,h=void 0,l=void 0,c=void 0,v=1;v<=r;v+=1){var s=v,g=Math.ceil(r/s);(c=(l=Math.floor(i/g))/(h=Math.floor(o/s)))>e?l=h*(c=e):c<t&&(h=l/(c=t));var p=h*l*r;(void 0===n||p>n)&&(n=p,f=l,u=h,a=s,d=g)}return{maxArea:n,targetCols:a,targetRows:d,targetHeight:f,targetWidth:u,ratio:f/u}};t.exports=function(t,e){var o=t.maxRatio,r=void 0===o?1.5:o,n=t.minRatio,a=void 0===n?9/16:n,d=t.fixedRatio,f=void 0!==d&&d,u=t.containerWidth,h=void 0===u?640:u,l=t.containerHeight,c=void 0===l?480:l,v=e.length,s=void 0;if(f){var g=e.length>0?e[0]:null;s=i(g,g,h,c,v)}else s=i(a,r,h,c,v);for(var p=0,y=0,b=[],m=void 0,x=[],w=0;w<e.length;w+=1){w%s.targetCols==0&&(m={ratios:[],width:0,height:0},b.push(m));var M=e[w];m.ratios.push(M);var R=s.targetWidth,S=s.targetHeight;f&&(R=S/M),m.width+=R,m.height=S}for(var H=0,j=0,W=0;W<b.length;W+=1)(m=b[W]).width>h?(m.height=Math.floor(m.height*(h/m.width)),m.width=h):m.width<h&&(j+=1),H+=m.height;if(H<c&&j>0){var L=c-H;H=0;for(var O=0;O<b.length;O+=1){if((m=b[O]).width<h){var T=L/j;T/m.height>(h-m.width)/m.width&&(T=Math.floor((h-m.width)/m.width*m.height)),m.width+=Math.floor(T/m.height*m.width),m.height+=T,L-=T,j-=1}H+=m.height}}y=(c-H)/2;for(var _=0;_<b.length;_+=1){p=(h-(m=b[_]).width)/2;for(var A=void 0,P=0;P<m.ratios.length;P+=1){var C=m.ratios[P],q=s.targetWidth;A=m.height,f&&(q=Math.floor(A/C)),x.push({aspectRatio:C,left:p,top:y,width:q,height:A}),p+=q}y+=A}return x}},function(t,e,o){"use strict";var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=o(1);function n(t,e,o){if(o)return t.style[e]=o,NaN;if("object"===(void 0===e?"undefined":i(e)))return Object.keys(e).forEach(function(o){n(t,o,e[o])}),NaN;var r=getComputedStyle(t).getPropertyValue(e);return""===r&&(r=t.style[e]),r}var a=function(t){return"none"!==n(t,"display")};var d=function(t){if(!t)return.75;var e=t.querySelector("video");return e&&e.videoHeight&&e.videoWidth?e.videoHeight/e.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},f=function(t,e){var o=n(t,e);return o?parseInt(o,10):0},u=function(t){var e=function(t){return t.offsetHeight>0?t.offsetHeight+"px":n(t,"height")}(t);return e?parseInt(e,10):0},h=function(t){var e=function(t){return t.offsetWidth>0?t.offsetWidth+"px":n(t,"width")}(t);return e?parseInt(e,10):0},l=function(t,e,o,i,a,u,h,l,c){r({containerWidth:e,containerHeight:o,minRatio:h,maxRatio:l,fixedRatio:u},t.map(function(t){return d(t)})).forEach(function(e,o){var r=t[o];n(r,"position","absolute");var d=e.width-f(r,"paddingLeft")-f(r,"paddingRight")-f(r,"marginLeft")-f(r,"marginRight")-f(r,"borderLeft")-f(r,"borderRight"),u=e.height-f(r,"paddingTop")-f(r,"paddingBottom")-f(r,"marginTop")-f(r,"marginBottom")-f(r,"borderTop")-f(r,"borderBottom");!function(t,e,o,i,r,a){var d=this,f={left:e+"px",top:o+"px",width:i+"px",height:r+"px"},u=function(){var e=t.querySelector(".OT_root");if(e){var o=e.style.width;e.style.width=i+"px",e.style.width=o||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){u(),a.complete&&a.complete.call(d)})):(n(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),u()}(r,e.left+i,e.top+a,d,u,c)})};t.exports=function(t,e){var o,i,r=e.maxRatio,c=void 0===r?1.5:r,v=e.minRatio,s=void 0===v?9/16:v,g=e.fixedRatio,p=void 0!==g&&g,y=e.animate,b=void 0!==y&&y,m=e.bigClass,x=void 0===m?"OT_big":m,w=e.bigPercentage,M=void 0===w?.8:w,R=e.bigFixedRatio,S=void 0!==R&&R,H=e.bigMaxRatio,j=void 0===H?1.5:H,W=e.bigMinRatio,L=void 0===W?9/16:W,O=e.bigFirst,T=void 0===O||O,_=e.containerWidth,A=e.containerHeight;if("none"!==n(t,"display")){var P=t.getAttribute("id");P||(P="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",P));var C=(i=u(t)-f(t,"borderTop")-f(t,"borderBottom"))/(o=h(t)-f(t,"borderLeft")-f(t,"borderRight")),q=0,B=0,E=0,N=0,F=Array.prototype.filter.call(t.querySelectorAll("#"+P+">."+x),a),I=Array.prototype.filter.call(t.querySelectorAll("#"+P+">*:not(."+x+")"),a);if(F.length>0&&I.length>0){var $=void 0,k=void 0;C>d(F[0])?($=o,E=i-(B=k=Math.floor(i*M))):(k=i,N=o-(q=$=Math.floor(o*M))),T?(l(F,$,k,0,0,S,L,j,b),l(I,o-q,i-B,q,B,p,s,c,b)):(l(I,o-q,i-B,0,0,p,s,c,b),l(F,$,k,N,E,S,L,j,b))}else F.length>0&&0===I.length?l(F,o,i,0,0,S,L,j,b):l(I,o-q,i-B,q,B,p,s,c,b)}}}])});
+ * */var o=i(1),n=i(2);t.exports=function(t,e){return t="string"==typeof t?document.querySelector(t):t,"undefined"==typeof HTMLElement||t instanceof HTMLElement||e?e||(e={}):e=t,{layout:n.bind(this,t,e),getLayout:o.bind(this,e)}}},function(t,e,i){"use strict";var o=function(t,e,i,o,n){for(var r=void 0,a=void 0,f=void 0,d=void 0,h=void 0,u=void 0,c=void 0,l=void 0,s=1;s<=n;s+=1){var g=s,v=Math.ceil(n/g);(l=(c=Math.floor(o/v))/(u=Math.floor(i/g)))>e?c=u*(l=e):l<t&&(u=c/(l=t));var p=u*c*n;(void 0===r||p>r)&&(r=p,d=c,h=u,a=g,f=v)}return{maxArea:r,targetCols:a,targetRows:f,targetHeight:d,targetWidth:h,ratio:d/h}},n=function(t,e){var i=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,f=t.containerHeight,d=t.offsetLeft,h=void 0===d?0:d,u=t.offsetTop,c=void 0===u?0:u,l=e.map(function(t){return t.height/t.width}),s=l.length,g=void 0;if(r){var v=l.length>0?l[0]:null;g=o(v,v,a,f,s)}else g=o(n,i,a,f,s);for(var p=0,y=0,m=[],b=void 0,x=[],R=0;R<l.length;R+=1){R%g.targetCols==0&&(b={ratios:[],width:0,height:0},m.push(b));var w=l[R];b.ratios.push(w);var H=g.targetWidth,L=g.targetHeight;r&&(H=L/w),b.width+=H,b.height=L}for(var M=0,W=0,T=0;T<m.length;T+=1)(b=m[T]).width>a?(b.height=Math.floor(b.height*(a/b.width)),b.width=a):b.width<a&&(W+=1),M+=b.height;if(M<f&&W>0){var S=f-M;M=0;for(var j=0;j<m.length;j+=1){if((b=m[j]).width<a){var O=S/W;O/b.height>(a-b.width)/b.width&&(O=Math.floor((a-b.width)/b.width*b.height)),b.width+=Math.floor(O/b.height*b.width),b.height+=O,S-=O,W-=1}M+=b.height}}y=(f-M)/2;for(var _=0;_<m.length;_+=1){p=(a-(b=m[_]).width)/2;for(var P=void 0,C=0;C<b.ratios.length;C+=1){var A=b.ratios[C],E=g.targetWidth;P=b.height,r&&(E=Math.floor(P/A)),x.push({left:p+h,top:y+c,width:E,height:P}),p+=E}y+=P}return x};t.exports=function(t,e){console.log("getLayout",t,e);var i=t.maxRatio,o=void 0===i?1.5:i,r=t.minRatio,a=void 0===r?9/16:r,f=t.fixedRatio,d=void 0!==f&&f,h=t.bigPercentage,u=void 0===h?.8:h,c=t.bigFixedRatio,l=void 0!==c&&c,s=t.bigMaxRatio,g=void 0===s?1.5:s,v=t.bigMinRatio,p=void 0===v?9/16:v,y=t.bigFirst,m=void 0===y||y,b=t.containerWidth,x=void 0===b?640:b,R=t.containerHeight,w=void 0===R?480:R,H=w/x,L=0,M=0,W=0,T=0,S=[],j=e.filter(function(t,e){return!!t.big&&(S.push(e),!0)}),O=e.filter(function(t){return!t.big}),_=[],P=[];if(j.length>0&&O.length>0){var C=void 0,A=void 0;H>function(t){return t.height/t.width}(j[0])?(C=x,W=w-(M=A=Math.floor(w*u))):(A=w,T=x-(L=C=Math.floor(x*u))),m?(_=n({containerWidth:C,containerHeight:A,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:p,maxRatio:g},j),P=n({containerWidth:x-L,containerHeight:w-M,offsetLeft:L,offsetTop:M,fixedRatio:d,minRatio:a,maxRatio:o},O)):(P=n({containerWidth:x-L,containerHeight:w-M,offsetLeft:0,offsetTop:0,fixedRatio:d,minRatio:a,maxRatio:o},O),_=n({containerWidth:C,containerHeight:A,offsetLeft:T,offsetTop:W,fixedRatio:l,minRatio:p},j))}else j.length>0&&0===O.length?_=n({containerWidth:x,containerHeight:w,fixedRatio:l,minRatio:p,maxRatio:g},j):P=n({containerWidth:x-L,containerHeight:w-M,offsetLeft:L,offsetTop:M,fixedRatio:d,minRatio:a,maxRatio:o},O);var E=[],q=0,B=0;return e.forEach(function(t,e){S.indexOf(e)>-1?(E[e]=_[q],q+=1):(E[e]=P[B],B+=1)}),E}},function(t,e,i){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=i(1);function r(t,e,i){if(i)return t.style[e]=i,NaN;if("object"===(void 0===e?"undefined":o(e)))return Object.keys(e).forEach(function(i){r(t,i,e[i])}),NaN;var n=getComputedStyle(t).getPropertyValue(e);return""===n&&(n=t.style[e]),n}var a=function(t){return"none"!==r(t,"display")};var f=function(t,e){var i=r(t,e);return i?parseInt(i,10):0},d=function(t){var e=function(t){return t.offsetHeight>0?t.offsetHeight+"px":r(t,"height")}(t);return e?parseInt(e,10):0},h=function(t){var e=function(t){return t.offsetWidth>0?t.offsetWidth+"px":r(t,"width")}(t);return e?parseInt(e,10):0};t.exports=function(t,e){var i=e.animate,o=void 0!==i&&i,u=e.bigClass,c=void 0===u?"OT_big":u;if("none"!==r(t,"display")){var l=t.getAttribute("id");l||(l="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",l)),e.containerHeight=d(t)-f(t,"borderTop")-f(t,"borderBottom"),e.containerWidth=h(t)-f(t,"borderLeft")-f(t,"borderRight");var s=Array.prototype.filter.call(t.querySelectorAll("#"+l+">*"),a),g=s.map(function(t){var e=function(t){if(t){var e=t.querySelector("video");if(e&&e.videoHeight&&e.videoWidth)return{height:e.videoHeight,width:e.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return e.big=t.classList.contains(c),e});n(e,g).forEach(function(t,e){var i=s[e];r(i,"position","absolute");var n=t.width-f(i,"paddingLeft")-f(i,"paddingRight")-f(i,"marginLeft")-f(i,"marginRight")-f(i,"borderLeft")-f(i,"borderRight"),a=t.height-f(i,"paddingTop")-f(i,"paddingBottom")-f(i,"marginTop")-f(i,"marginBottom")-f(i,"borderTop")-f(i,"borderBottom");!function(t,e,i,o,n,a){var f=this,d={left:e+"px",top:i+"px",width:o+"px",height:n+"px"},h=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=o+"px",e.style.width=i||""}};a&&$?($(t).stop(),$(t).animate(d,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(f)})):(r(t,d),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(i,t.left,t.top,n,a,o)})}}}])});
 //# sourceMappingURL=opentok-layout.min.js.map

package.json

 {
   "name": "opentok-layout-js",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.",
@@ -17,2 +17,3 @@ "main": "opentok-layout.js",
     "karma": "^0.13.0",
+    "karma-babel-preprocessor": "^7.0.0",
     "karma-chrome-launcher": "^0.1.4",
@@ -19,0 +20,0 @@ "karma-coverage": "^0.2.7",

README.md

@@ -27,28 +27,36 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
 
-Call `initLayoutContainer` and pass it the element you want it to layout. It works best if you set the position of the element to be absolute or relative. You will then be returned an object with a layout method that you can call to layout the page.
+Call `initLayoutContainer` and pass it the element you want it to layout. It works best if you set the position of the element to be absolute or relative. You will then be returned an object with a layout method that you can call to layout the elements inside.
 
 ```javascript
-var initLayoutContainer = require('opentok-layout-js');
-var layout = initLayoutContainer(document.getElementById("layout"), {
-    maxRatio: 3/2,     // The narrowest ratio that will be used (default 2x3)
-    minRatio: 9/16,      // The widest ratio that will be used (default 16x9)
-    fixedRatio: false,  // If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (default false)
-    bigClass: "OT_big", // The class to add to elements that should be sized bigger
-    bigPercentage: 0.8  // The maximum percentage of space the big ones should take up
-    bigFixedRatio: false, // fixedRatio for the big ones
-    bigMaxRatio: 3/2,     // The narrowest ratio to use for the big elements (default 2x3)
-    bigMinRatio: 9/16,     // The widest ratio to use for the big elements (default 16x9)
-    bigFirst: true,        // Whether to place the big one in the top left (true) or bottom right
-    animate: true         // Whether you want to animate the transitions
-});
+const initLayoutContainer = require('opentok-layout-js');
+const options = {
+    maxRatio: 3/2,          // The narrowest ratio that will be used (default 2x3)
+    minRatio: 9/16,         // The widest ratio that will be used (default 16x9)
+    fixedRatio: false,      // If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (default false)
+    bigClass: "OT_big",     // The class to add to elements that should be sized bigger
+    bigPercentage: 0.8      // The maximum percentage of space the big ones should take up
+    bigFixedRatio: false,   // fixedRatio for the big ones
+    bigMaxRatio: 3/2,       // The narrowest ratio to use for the big elements (default 2x3)
+    bigMinRatio: 9/16,      // The widest ratio to use for the big elements (default 16x9)
+    bigFirst: true,         // Whether to place the big one in the top left (true) or bottom right
+    animate: true           // Whether you want to animate the transitions
+};
+const layout = initLayoutContainer(document.getElementById("layout"), options);
 layout.layout();
 ```
 
-The other way to use this library is to just use the `getLayout()` method to get the layout and position the elements yourself. Get layout takes an array of aspect ratios (Height / Width) as the first argument.
+The other way to use this library is to just use the `getLayout()` method to get the layout data and position the elements yourself. `getLayout()` takes an array of objects with a width and height property along with a `big` property indicating whether it should be treated as a bigger element. eg.
 
 ```javascript
-let boxes = layout.getLayout([480/640, 480/640, 720/1280]);
+const layout = initLayoutContainer(options);
+const boxes = layout.getLayout([
+    {
+        width: 640,     // The native width of this element (eg. subscriber.videoWidth())
+        height: 480,    // The native height of this element (eg. subscriber.videoHeight())
+        big: false      // Whether to treat this element as a bigger element 
+    }
+]);
 ```
 
-It will return an array of boxes which each have:
+It will return an array of boxes which will be in the same order as the array you passed in. Each element in the array will look like:
 
@@ -59,3 +67,2 @@ ```javascript
     height,
-    aspectRatio,
     top,
@@ -62,0 +69,0 @@ left

src/getLayout.js

@@ -53,11 +53,16 @@ const getBestDimensions = (minRatio, maxRatio, Width, Height, count) => {
 
-module.exports = (opts, ratios) => {
+const getLayout = (opts, elements) => {
   const {
-    maxRatio = 3 / 2,
-    minRatio = 9 / 16,
-    fixedRatio = false,
-    containerWidth = 640,
-    containerHeight = 480,
+    maxRatio,
+    minRatio,
+    fixedRatio,
+    containerWidth,
+    containerHeight,
+    offsetLeft = 0,
+    offsetTop = 0,
   } = opts;
+  const ratios = elements.map(element => element.height / element.width);
   const count = ratios.length;
+
+
   let dimensions;
@@ -158,5 +163,4 @@
       boxes.push({
-        aspectRatio: ratio,
-        left: x,
-        top: y,
+        left: x + offsetLeft,
+        top: y + offsetTop,
         width: targetWidth,
@@ -171,1 +175,128 @@ height: targetHeight,
 };
+
+const getVideoRatio = element => element.height / element.width;
+
+module.exports = (opts, elements) => {
+  console.log('getLayout', opts, elements);
+  const {
+    maxRatio = 3 / 2,
+    minRatio = 9 / 16,
+    fixedRatio = false,
+    bigPercentage = 0.8,
+    bigFixedRatio = false,
+    bigMaxRatio = 3 / 2,
+    bigMinRatio = 9 / 16,
+    bigFirst = true,
+    containerWidth = 640,
+    containerHeight = 480,
+  } = opts;
+
+  const availableRatio = containerHeight / containerWidth;
+  let offsetLeft = 0;
+  let offsetTop = 0;
+  let bigOffsetTop = 0;
+  let bigOffsetLeft = 0;
+  const bigIndices = [];
+  const bigOnes = elements.filter((element, idx) => {
+    if (element.big) {
+      bigIndices.push(idx);
+      return true;
+    }
+    return false;
+  });
+  const smallOnes = elements.filter(element => !element.big);
+  let bigBoxes = [];
+  let smallBoxes = [];
+  if (bigOnes.length > 0 && smallOnes.length > 0) {
+    let bigWidth;
+    let bigHeight;
+
+    if (availableRatio > getVideoRatio(bigOnes[0])) {
+      // We are tall, going to take up the whole width and arrange small
+      // guys at the bottom
+      bigWidth = containerWidth;
+      bigHeight = Math.floor(containerHeight * bigPercentage);
+      offsetTop = bigHeight;
+      bigOffsetTop = containerHeight - offsetTop;
+    } else {
+      // We are wide, going to take up the whole height and arrange the small
+      // guys on the right
+      bigHeight = containerHeight;
+      bigWidth = Math.floor(containerWidth * bigPercentage);
+      offsetLeft = bigWidth;
+      bigOffsetLeft = containerWidth - offsetLeft;
+    }
+    if (bigFirst) {
+      bigBoxes = getLayout({
+        containerWidth: bigWidth,
+        containerHeight: bigHeight,
+        offsetLeft: 0,
+        offsetTop: 0,
+        fixedRatio: bigFixedRatio,
+        minRatio: bigMinRatio,
+        maxRatio: bigMaxRatio,
+      }, bigOnes);
+      smallBoxes = getLayout({
+        containerWidth: containerWidth - offsetLeft,
+        containerHeight: containerHeight - offsetTop,
+        offsetLeft,
+        offsetTop,
+        fixedRatio,
+        minRatio,
+        maxRatio,
+      }, smallOnes);
+    } else {
+      smallBoxes = getLayout({
+        containerWidth: containerWidth - offsetLeft,
+        containerHeight: containerHeight - offsetTop,
+        offsetLeft: 0,
+        offsetTop: 0,
+        fixedRatio,
+        minRatio,
+        maxRatio,
+      }, smallOnes);
+      bigBoxes = getLayout({
+        containerWidth: bigWidth,
+        containerHeight: bigHeight,
+        offsetLeft: bigOffsetLeft,
+        offsetTop: bigOffsetTop,
+        fixedRatio: bigFixedRatio,
+        minRatio: bigMinRatio,
+      }, bigOnes);
+    }
+  } else if (bigOnes.length > 0 && smallOnes.length === 0) {
+    // We only have one bigOne just center it
+    bigBoxes = getLayout({
+      containerWidth,
+      containerHeight,
+      fixedRatio: bigFixedRatio,
+      minRatio: bigMinRatio,
+      maxRatio: bigMaxRatio,
+    }, bigOnes);
+  } else {
+    smallBoxes = getLayout({
+      containerWidth: containerWidth - offsetLeft,
+      containerHeight: containerHeight - offsetTop,
+      offsetLeft,
+      offsetTop,
+      fixedRatio,
+      minRatio,
+      maxRatio,
+    }, smallOnes);
+  }
+
+  const boxes = [];
+  let bigBoxesIdx = 0;
+  let smallBoxesIdx = 0;
+  // Rebuild the array in the right order based on where the bigIndices should be
+  elements.forEach((element, idx) => {
+    if (bigIndices.indexOf(idx) > -1) {
+      boxes[idx] = bigBoxes[bigBoxesIdx];
+      bigBoxesIdx += 1;
+    } else {
+      boxes[idx] = smallBoxes[smallBoxesIdx];
+      smallBoxesIdx += 1;
+    }
+  });
+  return boxes;
+};

src/layout.js

@@ -80,14 +80,22 @@ const getLayout = require('./getLayout');
 
-const getVideoRatio = function getVideoRatio(elem) {
-  if (!elem) {
-    return 3 / 4;
+const getChildDims = function getChildDims(child) {
+  if (child) {
+    const video = child.querySelector('video');
+    if (video && video.videoHeight && video.videoWidth) {
+      return {
+        height: video.videoHeight,
+        width: video.videoWidth,
+      };
+    }
+    if (child.videoHeight && child.videoWidth) {
+      return {
+        height: child.videoHeight,
+        width: child.videoWidth,
+      };
+    }
   }
-  const video = elem.querySelector('video');
-  if (video && video.videoHeight && video.videoWidth) {
-    return video.videoHeight / video.videoWidth;
-  }
-  if (elem.videoHeight && elem.videoWidth) {
-    return elem.videoHeight / elem.videoWidth;
-  }
-  return 3 / 4;
+  return {
+    height: 480,
+    width: 640,
+  };
 };
@@ -115,51 +123,7 @@
 
-const arrange = function arrange(children, containerWidth, containerHeight, offsetLeft, offsetTop,
-  fixedRatio, minRatio, maxRatio, animate) {
-  const boxes = getLayout({
-    containerWidth,
-    containerHeight,
-    minRatio,
-    maxRatio,
-    fixedRatio,
-  }, children.map(child => getVideoRatio(child)));
-
-  boxes.forEach((box, idx) => {
-    const elem = children[idx];
-    css(elem, 'position', 'absolute');
-    const actualWidth = box.width - getCSSNumber(elem, 'paddingLeft')
-      - getCSSNumber(elem, 'paddingRight')
-      - getCSSNumber(elem, 'marginLeft')
-      - getCSSNumber(elem, 'marginRight')
-      - getCSSNumber(elem, 'borderLeft')
-      - getCSSNumber(elem, 'borderRight');
-
-    const actualHeight = box.height - getCSSNumber(elem, 'paddingTop')
-      - getCSSNumber(elem, 'paddingBottom')
-      - getCSSNumber(elem, 'marginTop')
-      - getCSSNumber(elem, 'marginBottom')
-      - getCSSNumber(elem, 'borderTop')
-      - getCSSNumber(elem, 'borderBottom');
-
-    positionElement(elem, box.left + offsetLeft, box.top + offsetTop, actualWidth, actualHeight,
-      animate);
-  });
-};
-
 module.exports = (container, opts) => {
   const {
-    maxRatio = 3 / 2,
-    minRatio = 9 / 16,
-    fixedRatio = false,
     animate = false,
     bigClass = 'OT_big',
-    bigPercentage = 0.8,
-    bigFixedRatio = false,
-    bigMaxRatio = 3 / 2,
-    bigMinRatio = 9 / 16,
-    bigFirst = true,
   } = opts;
-  let {
-    containerWidth = 640,
-    containerHeight = 480,
-  } = opts;
 
@@ -175,61 +139,40 @@ if (css(container, 'display') === 'none') {
 
-  containerHeight = getHeight(container)
+  opts.containerHeight = getHeight(container)
     - getCSSNumber(container, 'borderTop')
     - getCSSNumber(container, 'borderBottom');
-  containerWidth = getWidth(container)
+  opts.containerWidth = getWidth(container)
     - getCSSNumber(container, 'borderLeft')
     - getCSSNumber(container, 'borderRight');
-  const availableRatio = containerHeight / containerWidth;
-  let offsetLeft = 0;
-  let offsetTop = 0;
-  let bigOffsetTop = 0;
-  let bigOffsetLeft = 0;
-  const bigOnes = Array.prototype.filter.call(
-    container.querySelectorAll(`#${id}>.${bigClass}`),
+
+  const children = Array.prototype.filter.call(
+    container.querySelectorAll(`#${id}>*`),
     filterDisplayNone
   );
-  const smallOnes = Array.prototype.filter.call(
-    container.querySelectorAll(`#${id}>*:not(.${bigClass})`),
-    filterDisplayNone
-  );
+  const elements = children.map((element) => {
+    const res = getChildDims(element);
+    res.big = element.classList.contains(bigClass);
+    return res;
+  });
 
-  if (bigOnes.length > 0 && smallOnes.length > 0) {
-    let bigWidth;
-    let
-      bigHeight;
+  const boxes = getLayout(opts, elements);
+  boxes.forEach((box, idx) => {
+    const elem = children[idx];
+    css(elem, 'position', 'absolute');
+    const actualWidth = box.width - getCSSNumber(elem, 'paddingLeft')
+        - getCSSNumber(elem, 'paddingRight')
+        - getCSSNumber(elem, 'marginLeft')
+        - getCSSNumber(elem, 'marginRight')
+        - getCSSNumber(elem, 'borderLeft')
+        - getCSSNumber(elem, 'borderRight');
 
-    if (availableRatio > getVideoRatio(bigOnes[0])) {
-      // We are tall, going to take up the whole width and arrange small
-      // guys at the bottom
-      bigWidth = containerWidth;
-      bigHeight = Math.floor(containerHeight * bigPercentage);
-      offsetTop = bigHeight;
-      bigOffsetTop = containerHeight - offsetTop;
-    } else {
-      // We are wide, going to take up the whole height and arrange the small
-      // guys on the right
-      bigHeight = containerHeight;
-      bigWidth = Math.floor(containerWidth * bigPercentage);
-      offsetLeft = bigWidth;
-      bigOffsetLeft = containerWidth - offsetLeft;
-    }
-    if (bigFirst) {
-      arrange(bigOnes, bigWidth, bigHeight, 0, 0, bigFixedRatio, bigMinRatio,
-        bigMaxRatio, animate);
-      arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, offsetLeft,
-        offsetTop, fixedRatio, minRatio, maxRatio, animate);
-    } else {
-      arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, 0, 0, fixedRatio,
-        minRatio, maxRatio, animate);
-      arrange(bigOnes, bigWidth, bigHeight, bigOffsetLeft, bigOffsetTop,
-        bigFixedRatio, bigMinRatio, bigMaxRatio, animate);
-    }
-  } else if (bigOnes.length > 0 && smallOnes.length === 0) {
-    // We only have one bigOne just center it
-    arrange(bigOnes, containerWidth, containerHeight, 0, 0, bigFixedRatio, bigMinRatio,
-      bigMaxRatio, animate);
-  } else {
-    arrange(smallOnes, containerWidth - offsetLeft, containerHeight - offsetTop, offsetLeft,
-      offsetTop, fixedRatio, minRatio, maxRatio, animate);
-  }
+    const actualHeight = box.height - getCSSNumber(elem, 'paddingTop')
+        - getCSSNumber(elem, 'paddingBottom')
+        - getCSSNumber(elem, 'marginTop')
+        - getCSSNumber(elem, 'marginBottom')
+        - getCSSNumber(elem, 'borderTop')
+        - getCSSNumber(elem, 'borderBottom');
+
+    positionElement(elem, box.left, box.top, actualWidth, actualHeight,
+      animate);
+  });
 };

tests/karma.conf.js

@@ -38,4 +38,12 @@ // Karma configuration
       'opentok-layout.js': 'coverage',
+      '**/*spec.js': 'babel',
     },
 
+    babelPreprocessor: {
+      options: {
+        presets: ['env'],
+        sourceMap: 'inline',
+      },
+    },
+
     // test results reporter to use
@@ -42,0 +50,0 @@ // possible values: 'dots', 'progress'

tests/unit/opentok-layout-spec.js

@@ -47,3 +47,2 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
       expectedLayout = [{
-        aspectRatio: 300 / 200,
         width: 200,
@@ -55,3 +54,2 @@ height: 300,
       {
-        aspectRatio: 300 / 200,
         width: 200,
@@ -76,3 +74,3 @@ height: 300,
       });
-      expect(layoutContainer.getLayout(children.map(() => 300 / 200)))
+      expect(layoutContainer.getLayout(children.map(() => ({ width: 300, height: 200 }))))
         .toEqual(expectedLayout);
@@ -153,17 +151,38 @@ });
         div1.className = 'OT_big';
+        expectedLayout = [{
+          width: 320,
+          height: 300,
+          left: 0,
+          top: 0,
+        },
+        {
+          width: 80,
+          height: 120,
+          left: 320,
+          top: 90,
+        },
+        ];
       });
 
+      it('handles default getLayout', () => {
+        const layoutContainer = initLayoutContainer({
+          containerWidth: 400,
+          containerHeight: 300,
+        });
+        expect(layoutContainer.getLayout(children.map(child => ({
+          width: 640,
+          height: 480,
+          big: child.className === 'OT_big',
+        })))).toEqual(expectedLayout);
+      });
+
       it('handles default layout', () => {
         const layoutContainer = initLayoutContainer(layoutDiv);
         layoutContainer.layout();
-        const div1Rect = div1.getBoundingClientRect();
-        const div2Rect = div2.getBoundingClientRect();
-        expect(div1Rect.width).toBe(320);
-        expect(div2Rect.width).toBe(80);
-        expect(div1Rect.height).toBe(300);
-        expect(div2Rect.height).toBe(120);
-        expect(div1Rect.left).toBe(0);
-        expect(div1Rect.top).toBe(0);
-        expect(div2Rect.left).toBe(320);
-        expect(div2Rect.top).toBe(90);
+        expectedLayout.forEach((box, idx) => {
+          const boundingRect = children[idx].getBoundingClientRect();
+          ['width', 'height', 'left', 'top'].forEach((val) => {
+            expect(boundingRect[val]).toEqual(expectedLayout[idx][val]);
+          });
+        });
       });
@@ -234,4 +253,5 @@
   describe('handling layout of 5 elements', () => {
-    let layoutDiv; let divs = []; const
-      divCount = 5;
+    let layoutDiv;
+    let divs = [];
+    const divCount = 5;
     beforeEach(() => {
@@ -238,0 +258,0 @@ layoutDiv = document.createElement('div');

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137513

increased by5.36%

Lines of code

1776

increased by11.14%

Number of lines in readme file

238

increased by3.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes