opentok-layout-js - npm Package Compare versions

Comparing version 3.9.2 to 4.0.0

bower.json

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

opentok-layout.js

@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
@@ -518,2 +518,43 @@ /************************************************************************/
 
+/*!
+ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
+ *
+ *  Automatic layout of video elements (publisher and subscriber) minimising
+ *  white-space for the OpenTok on WebRTC API.
+ *
+ *  @Author: Adam Ullman (http://github.com/aullman)
+ *  @Copyright (c) 2014 Adam Ullman
+ *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
+ * */
+
+// in CommonJS context, this should be a `require()`d dependency.
+// in browser globals context, ...? (when using bower, there are dependencies that it has handled
+// for you, so these might be safe to assume)
+
+var getLayout = __webpack_require__(0);
+var layout = __webpack_require__(2);
+
+module.exports = function initLayoutContainer(container, opts) {
+  var win = opts && opts.window || (typeof window === 'undefined' ? undefined : window);
+  container = typeof container === 'string' ? win.document.querySelector(container) : container;
+  if (!(typeof (win && win.HTMLElement) === 'undefined' || container instanceof win.HTMLElement) && !opts) {
+    // container is actually the options
+    opts = container;
+  } else if (!opts) {
+    opts = {};
+  }
+
+  return {
+    layout: layout.bind(this, container, opts),
+    getLayout: getLayout.bind(this, opts)
+  };
+};
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -679,4 +720,4 @@
 
-  opts.containerHeight = getHeight(container) - getCSSNumber(container, 'borderTop') - getCSSNumber(container, 'borderBottom');
-  opts.containerWidth = getWidth(container) - getCSSNumber(container, 'borderLeft') - getCSSNumber(container, 'borderRight');
+  opts.containerHeight = getHeight(container) - getCSSNumber(container, 'border-top') - getCSSNumber(container, 'border-bottom');
+  opts.containerWidth = getWidth(container) - getCSSNumber(container, 'border-left') - getCSSNumber(container, 'border-right');
 
@@ -694,5 +735,5 @@ var children = Array.prototype.filter.call(container.querySelectorAll('#' + id + '>*:not(.' + ignoreClass + ')'), filterDisplayNone);
     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 actualWidth = box.width - getCSSNumber(elem, 'padding-left') - getCSSNumber(elem, 'padding-right') - getCSSNumber(elem, 'margin-left') - getCSSNumber(elem, 'margin-right') - getCSSNumber(elem, 'border-left') - getCSSNumber(elem, 'border-right');
 
-    var actualHeight = box.height - getCSSNumber(elem, 'paddingTop') - getCSSNumber(elem, 'paddingBottom') - getCSSNumber(elem, 'marginTop') - getCSSNumber(elem, 'marginBottom') - getCSSNumber(elem, 'borderTop') - getCSSNumber(elem, 'borderBottom');
+    var actualHeight = box.height - getCSSNumber(elem, 'padding-top') - getCSSNumber(elem, 'padding-bottom') - getCSSNumber(elem, 'margin-top') - getCSSNumber(elem, 'margin-bottom') - getCSSNumber(elem, 'border-top') - getCSSNumber(elem, 'border-bottom');
 
@@ -703,45 +744,4 @@ positionElement(elem, box.left, box.top, actualWidth, actualHeight, animate, opts.onLayout);
 
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/*!
- *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
- *
- *  Automatic layout of video elements (publisher and subscriber) minimising
- *  white-space for the OpenTok on WebRTC API.
- *
- *  @Author: Adam Ullman (http://github.com/aullman)
- *  @Copyright (c) 2014 Adam Ullman
- *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
- * */
-
-// in CommonJS context, this should be a `require()`d dependency.
-// in browser globals context, ...? (when using bower, there are dependencies that it has handled
-// for you, so these might be safe to assume)
-
-var getLayout = __webpack_require__(0);
-var layout = __webpack_require__(1);
-
-module.exports = function initLayoutContainer(container, opts) {
-  var win = opts && opts.window || (typeof window === 'undefined' ? undefined : window);
-  container = typeof container === 'string' ? win.document.querySelector(container) : container;
-  if (!(typeof (win && win.HTMLElement) === 'undefined' || container instanceof win.HTMLElement) && !opts) {
-    // container is actually the options
-    opts = container;
-  } else if (!opts) {
-    opts = {};
-  }
-
-  return {
-    layout: layout.bind(this, container, opts),
-    getLayout: getLayout.bind(this, opts)
-  };
-};
-
 /***/ })
 /******/ ]);
 });

opentok-layout.min.js

@@ -1,2 +0,2 @@
-!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.initLayoutContainer=i():t.initLayoutContainer=i()}("undefined"!=typeof self?self:this,function(){return function(t){var i={};function e(o){if(i[o])return i[o].exports;var n=i[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,o){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(o,n,function(i){return t[i]}.bind(null,n));return o},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=2)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,h=void 0,f=void 0,s=void 0,l=void 0,u=void 0,c=void 0,g=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(g=(c=Math.floor(o/p))/(u=Math.floor(e/m)))>i?c=u*(g=i):g<t&&(u=c/(g=t));var x=(u=Math.min(r,u))*(c=Math.min(a,c))*n;(void 0===d||x>=d)&&(d=x,s=c,l=u,h=m,f=p)}return{maxArea:d,targetCols:h,targetRows:f,targetHeight:s,targetWidth:l,ratio:s/l}},n=function(t,i){var e=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,h=t.offsetLeft,f=void 0===h?0:h,s=t.offsetTop,l=void 0===s?0:s,u=t.alignItems,c=void 0===u?"center":u,g=t.maxWidth,v=void 0===g?1/0:g,m=t.maxHeight,p=void 0===m?1/0:m,x=t.scaleLastRow,b=void 0===x||x,y=i.map(function(t){return t.height/t.width}),w=y.length,R=void 0;if(r){var H=y.length>0?y[0]:null;R=o(H,H,a,d,w,v,p)}else R=o(n,e,a,d,w,v,p);for(var W=0,L=0,M=[],T=void 0,S=[],I=0;I<y.length;I+=1){I%R.targetCols==0&&(T={ratios:[],width:0,height:0},M.push(T));var O=y[I];T.ratios.push(O);var j=R.targetWidth,_=R.targetHeight;r&&(j=_/O),T.width+=j,T.height=_}for(var A=0,C=0,P=0;P<M.length;P+=1)(T=M[P]).width>a?(T.height=Math.floor(T.height*(a/T.width)),T.width=a):T.width<a&&T.height<p&&(C+=1),A+=T.height;if(b&&A<d&&C>0){var k=d-A;A=0;for(var E=0;E<M.length;E+=1){if((T=M[E]).width<a){var q=k/C;q/T.height>(a-T.width)/T.width&&(q=Math.floor((a-T.width)/T.width*T.height)),T.width+=Math.floor(q/T.height*T.width),T.height+=q,k-=q,C-=1}A+=T.height}}switch(c){case"start":L=0;break;case"end":L=d-A;break;case"center":default:L=(d-A)/2}for(var B=0;B<M.length;B+=1){T=M[B];var N=void 0;switch(c){case"start":N=0;break;case"end":N=a-T.width;break;case"center":default:N=(a-T.width)/2}W=N;for(var F=void 0,$=0;$<T.ratios.length;$+=1){var V=T.ratios[$],z=R.targetWidth;F=T.height,r?z=Math.floor(F/V):F/z!=R.targetHeight/R.targetWidth&&(z=Math.floor(R.targetWidth/R.targetHeight*F)),S.push({left:W+f,top:L+l,width:z,height:F}),W+=z}L+=F}return S};t.exports=function(t,i){var e=t.maxRatio,o=void 0===e?1.5:e,r=t.minRatio,a=void 0===r?9/16:r,d=t.fixedRatio,h=void 0!==d&&d,f=t.bigPercentage,s=void 0===f?.8:f,l=t.bigFixedRatio,u=void 0!==l&&l,c=t.bigMaxRatio,g=void 0===c?1.5:c,v=t.bigMinRatio,m=void 0===v?9/16:v,p=t.bigFirst,x=void 0===p||p,b=t.containerWidth,y=void 0===b?640:b,w=t.containerHeight,R=void 0===w?480:w,H=t.alignItems,W=void 0===H?"center":H,L=t.bigAlignItems,M=void 0===L?"center":L,T=t.smallAlignItems,S=void 0===T?"center":T,I=t.maxWidth,O=void 0===I?1/0:I,j=t.maxHeight,_=void 0===j?1/0:j,A=t.smallMaxWidth,C=void 0===A?1/0:A,P=t.smallMaxHeight,k=void 0===P?1/0:P,E=t.bigMaxWidth,q=void 0===E?1/0:E,B=t.bigMaxHeight,N=void 0===B?1/0:B,F=t.scaleLastRow,$=void 0===F||F,V=t.bigScaleLastRow,z=void 0===V||V,D=R/y,G=0,J=0,K=0,Q=0,U=[],X=i.filter(function(t,i){return!!t.big&&(U.push(i),!0)}),Y=i.filter(function(t){return!t.big}),Z=[],tt=[];if(X.length>0&&Y.length>0){var it=void 0,et=void 0,ot=!0===x;D>function(t){return t.height/t.width}(X[0])?(it=y,K=R-(J=et=Math.floor(R*s)),"column"===x?ot=!1:"row"===x&&(ot=!0)):(et=R,Q=y-(G=it=Math.floor(y*s)),"column"===x?ot=!0:"row"===x&&(ot=!1)),ot?(Z=n({containerWidth:it,containerHeight:et,offsetLeft:0,offsetTop:0,fixedRatio:u,minRatio:m,maxRatio:g,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X),tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:G,offsetTop:J,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k,scaleLastRow:$},Y)):(tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:0,offsetTop:0,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k,scaleLastRow:$},Y),Z=n({containerWidth:it,containerHeight:et,offsetLeft:Q,offsetTop:K,fixedRatio:u,minRatio:m,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X))}else X.length>0&&0===Y.length?Z=n({containerWidth:y,containerHeight:R,fixedRatio:u,minRatio:m,maxRatio:g,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X):tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:G,offsetTop:J,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_,scaleLastRow:$},Y);var nt=[],rt=0,at=0;return i.forEach(function(t,i){U.indexOf(i)>-1?(nt[i]=Z[rt],rt+=1):(nt[i]=tt[at],at+=1)}),nt}},function(t,i,e){"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=e(0);t.exports=function(t,i){function e(t,n,r){if(r)return t.style[n]=r,NaN;if("object"===(void 0===n?"undefined":o(n)))return Object.keys(n).forEach(function(i){e(t,i,n[i])}),NaN;var a=(i&&i.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,i){var o=e(t,i);return o?parseInt(o,10):0},a=i.animate,d=void 0!==a&&a,h=i.bigClass,f=void 0===h?"OT_big":h,s=i.ignoreClass,l=void 0===s?"OT_ignore":s;if("none"!==e(t,"display")){var u=t.getAttribute("id");u||(u="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",u)),i.containerHeight=function(t){var i=function(t){return t.offsetHeight>0?t.offsetHeight+"px":e(t,"height")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),i.containerWidth=function(t){var i=function(t){return t.offsetWidth>0?t.offsetWidth+"px":e(t,"width")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var c=Array.prototype.filter.call(t.querySelectorAll("#"+u+">*:not(."+l+")"),function(t){return"none"!==e(t,"display")}),g=c.map(function(t){var i=function(t){if(t){if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth};var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(f),i});n(i,g).forEach(function(t,o){var n=c[o];e(n,"position","absolute");var a=t.width-r(n,"paddingLeft")-r(n,"paddingRight")-r(n,"marginLeft")-r(n,"marginRight")-r(n,"borderLeft")-r(n,"borderRight"),h=t.height-r(n,"paddingTop")-r(n,"paddingBottom")-r(n,"marginTop")-r(n,"marginBottom")-r(n,"borderTop")-r(n,"borderBottom");!function(t,i,o,n,r,a,d){var h=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},s=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&"undefined"!=typeof $?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){s(),a.complete&&a.complete.call(h),d&&d(t,{left:i,top:o,width:n,height:r})})):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout"),d&&d(t,{left:i,top:o,width:n,height:r})),s()}(n,t.left,t.top,a,h,d,i.onLayout)})}}},function(t,i,e){"use strict";
+!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.initLayoutContainer=i():t.initLayoutContainer=i()}("undefined"!=typeof self?self:this,(function(){return function(t){var i={};function e(o){if(i[o])return i[o].exports;var n=i[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,o){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(o,n,function(i){return t[i]}.bind(null,n));return o},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=1)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,h=void 0,f=void 0,s=void 0,l=void 0,g=void 0,c=void 0,u=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(u=(c=Math.floor(o/p))/(g=Math.floor(e/m)))>i?c=g*(u=i):u<t&&(g=c/(u=t));var b=(g=Math.min(r,g))*(c=Math.min(a,c))*n;(void 0===d||b>=d)&&(d=b,s=c,l=g,h=m,f=p)}return{maxArea:d,targetCols:h,targetRows:f,targetHeight:s,targetWidth:l,ratio:s/l}},n=function(t,i){var e=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,h=t.offsetLeft,f=void 0===h?0:h,s=t.offsetTop,l=void 0===s?0:s,g=t.alignItems,c=void 0===g?"center":g,u=t.maxWidth,v=void 0===u?1/0:u,m=t.maxHeight,p=void 0===m?1/0:m,b=t.scaleLastRow,x=void 0===b||b,y=i.map((function(t){return t.height/t.width})),w=y.length,R=void 0;if(r){var H=y.length>0?y[0]:null;R=o(H,H,a,d,w,v,p)}else R=o(n,e,a,d,w,v,p);for(var W=0,M=0,L=[],S=void 0,T=[],I=0;I<y.length;I+=1){I%R.targetCols==0&&(S={ratios:[],width:0,height:0},L.push(S));var O=y[I];S.ratios.push(O);var j=R.targetWidth,_=R.targetHeight;r&&(j=_/O),S.width+=j,S.height=_}for(var A=0,C=0,P=0;P<L.length;P+=1)(S=L[P]).width>a?(S.height=Math.floor(S.height*(a/S.width)),S.width=a):S.width<a&&S.height<p&&(C+=1),A+=S.height;if(x&&A<d&&C>0){var k=d-A;A=0;for(var E=0;E<L.length;E+=1){if((S=L[E]).width<a){var q=k/C;q/S.height>(a-S.width)/S.width&&(q=Math.floor((a-S.width)/S.width*S.height)),S.width+=Math.floor(q/S.height*S.width),S.height+=q,k-=q,C-=1}A+=S.height}}switch(c){case"start":M=0;break;case"end":M=d-A;break;case"center":default:M=(d-A)/2}for(var N=0;N<L.length;N+=1){S=L[N];var F=void 0;switch(c){case"start":F=0;break;case"end":F=a-S.width;break;case"center":default:F=(a-S.width)/2}W=F;for(var $=void 0,V=0;V<S.ratios.length;V+=1){var z=S.ratios[V],B=R.targetWidth;$=S.height,r?B=Math.floor($/z):$/B!=R.targetHeight/R.targetWidth&&(B=Math.floor(R.targetWidth/R.targetHeight*$)),T.push({left:W+f,top:M+l,width:B,height:$}),W+=B}M+=$}return T};t.exports=function(t,i){var e,o=t.maxRatio,r=void 0===o?1.5:o,a=t.minRatio,d=void 0===a?9/16:a,h=t.fixedRatio,f=void 0!==h&&h,s=t.bigPercentage,l=void 0===s?.8:s,g=t.bigFixedRatio,c=void 0!==g&&g,u=t.bigMaxRatio,v=void 0===u?1.5:u,m=t.bigMinRatio,p=void 0===m?9/16:m,b=t.bigFirst,x=void 0===b||b,y=t.containerWidth,w=void 0===y?640:y,R=t.containerHeight,H=void 0===R?480:R,W=t.alignItems,M=void 0===W?"center":W,L=t.bigAlignItems,S=void 0===L?"center":L,T=t.smallAlignItems,I=void 0===T?"center":T,O=t.maxWidth,j=void 0===O?1/0:O,_=t.maxHeight,A=void 0===_?1/0:_,C=t.smallMaxWidth,P=void 0===C?1/0:C,k=t.smallMaxHeight,E=void 0===k?1/0:k,q=t.bigMaxWidth,N=void 0===q?1/0:q,F=t.bigMaxHeight,$=void 0===F?1/0:F,V=t.scaleLastRow,z=void 0===V||V,B=t.bigScaleLastRow,D=void 0===B||B,G=H/w,J=0,K=0,Q=0,U=0,X=[],Y=i.filter((function(t,i){return!!t.big&&(X.push(i),!0)})),Z=i.filter((function(t){return!t.big})),tt=[],it=[];if(Y.length>0&&Z.length>0){var et=void 0,ot=void 0,nt=!0===x;G>(e=Y[0]).height/e.width?(et=w,Q=H-(K=ot=Math.floor(H*l)),"column"===x?nt=!1:"row"===x&&(nt=!0)):(ot=H,U=w-(J=et=Math.floor(w*l)),"column"===x?nt=!0:"row"===x&&(nt=!1)),nt?(tt=n({containerWidth:et,containerHeight:ot,offsetLeft:0,offsetTop:0,fixedRatio:c,minRatio:p,maxRatio:v,alignItems:S,maxWidth:N,maxHeight:$,scaleLastRow:D},Y),it=n({containerWidth:w-J,containerHeight:H-K,offsetLeft:J,offsetTop:K,fixedRatio:f,minRatio:d,maxRatio:r,alignItems:I,maxWidth:P,maxHeight:E,scaleLastRow:z},Z)):(it=n({containerWidth:w-J,containerHeight:H-K,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:d,maxRatio:r,alignItems:I,maxWidth:P,maxHeight:E,scaleLastRow:z},Z),tt=n({containerWidth:et,containerHeight:ot,offsetLeft:U,offsetTop:Q,fixedRatio:c,minRatio:p,alignItems:S,maxWidth:N,maxHeight:$,scaleLastRow:D},Y))}else Y.length>0&&0===Z.length?tt=n({containerWidth:w,containerHeight:H,fixedRatio:c,minRatio:p,maxRatio:v,alignItems:S,maxWidth:N,maxHeight:$,scaleLastRow:D},Y):it=n({containerWidth:w-J,containerHeight:H-K,offsetLeft:J,offsetTop:K,fixedRatio:f,minRatio:d,maxRatio:r,alignItems:M,maxWidth:j,maxHeight:A,scaleLastRow:z},Z);var rt=[],at=0,dt=0;return i.forEach((function(t,i){X.indexOf(i)>-1?(rt[i]=tt[at],at+=1):(rt[i]=it[dt],dt+=1)})),rt}},function(t,i,e){"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 o=e(0),n=e(1);t.exports=function(t,i){var e=i&&i.window||("undefined"==typeof window?void 0:window);return t="string"==typeof t?e.document.querySelector(t):t,void 0===(e&&e.HTMLElement)||t instanceof e.HTMLElement||i?i||(i={}):i=t,{layout:n.bind(this,t,i),getLayout:o.bind(this,i)}}}])});
+ * */var o=e(0),n=e(2);t.exports=function(t,i){var e=i&&i.window||("undefined"==typeof window?void 0:window);return t="string"==typeof t?e.document.querySelector(t):t,void 0===(e&&e.HTMLElement)||t instanceof e.HTMLElement||i?i||(i={}):i=t,{layout:n.bind(this,t,i),getLayout:o.bind(this,i)}}},function(t,i,e){"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=e(0);t.exports=function(t,i){function e(t,n,r){if(r)return t.style[n]=r,NaN;if("object"===(void 0===n?"undefined":o(n)))return Object.keys(n).forEach((function(i){e(t,i,n[i])})),NaN;var a=(i&&i.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,i){var o=e(t,i);return o?parseInt(o,10):0},a=i.animate,d=void 0!==a&&a,h=i.bigClass,f=void 0===h?"OT_big":h,s=i.ignoreClass,l=void 0===s?"OT_ignore":s;if("none"!==e(t,"display")){var g,c,u=t.getAttribute("id");u||(u="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",u)),i.containerHeight=((c=(g=t).offsetHeight>0?g.offsetHeight+"px":e(g,"height"))?parseInt(c,10):0)-r(t,"border-top")-r(t,"border-bottom"),i.containerWidth=function(t){var i,o=(i=t).offsetWidth>0?i.offsetWidth+"px":e(i,"width");return o?parseInt(o,10):0}(t)-r(t,"border-left")-r(t,"border-right");var v=Array.prototype.filter.call(t.querySelectorAll("#"+u+">*:not(."+l+")"),(function(t){return"none"!==e(t,"display")})),m=v.map((function(t){var i=function(t){if(t){if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth};var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(f),i}));n(i,m).forEach((function(t,o){var n=v[o];e(n,"position","absolute");var a=t.width-r(n,"padding-left")-r(n,"padding-right")-r(n,"margin-left")-r(n,"margin-right")-r(n,"border-left")-r(n,"border-right"),h=t.height-r(n,"padding-top")-r(n,"padding-bottom")-r(n,"margin-top")-r(n,"margin-bottom")-r(n,"border-top")-r(n,"border-bottom");!function(t,i,o,n,r,a,d){var h=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},s=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&"undefined"!=typeof $?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",(function(){s(),a.complete&&a.complete.call(h),d&&d(t,{left:i,top:o,width:n,height:r})}))):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout"),d&&d(t,{left:i,top:o,width:n,height:r})),s()}(n,t.left,t.top,a,h,d,i.onLayout)}))}}}])}));
 //# sourceMappingURL=opentok-layout.min.js.map

package.json

 {
   "name": "opentok-layout-js",
-  "version": "3.9.2",
+  "version": "4.0.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.",
@@ -18,3 +18,3 @@ "main": "opentok-layout.js",
     "karma-babel-preprocessor": "^7.0.0",
-    "karma-chrome-launcher": "^0.1.4",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^1.1.2",
@@ -24,4 +24,5 @@ "karma-firefox-launcher": "^0.1.3",
     "karma-sauce-launcher": "^1.2.0",
+    "puppeteer": "^10.2.0",
     "unminified-webpack-plugin": "^2.0.0",
-    "webpack": "^5.37.0",
+    "webpack": "^4.46.0",
     "webpack-command": "^0.4.1"
@@ -28,0 +29,0 @@ },

README.md

@@ -1,3 +0,1 @@
-[![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
-
 [![Demo of Layout Container](https://github.com/aullman/opentok-layout-js/raw/master/layout-demo.gif)](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo")
@@ -4,0 +2,0 @@

src/layout.js

@@ -155,7 +155,7 @@ const getLayout = require('./getLayout');
   opts.containerHeight = getHeight(container)
-    - getCSSNumber(container, 'borderTop')
-    - getCSSNumber(container, 'borderBottom');
+    - getCSSNumber(container, 'border-top')
+    - getCSSNumber(container, 'border-bottom');
   opts.containerWidth = getWidth(container)
-    - getCSSNumber(container, 'borderLeft')
-    - getCSSNumber(container, 'borderRight');
+    - getCSSNumber(container, 'border-left')
+    - getCSSNumber(container, 'border-right');
 
@@ -176,15 +176,15 @@ const children = Array.prototype.filter.call(
     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 actualWidth = box.width - getCSSNumber(elem, 'padding-left')
+      - getCSSNumber(elem, 'padding-right')
+      - getCSSNumber(elem, 'margin-left')
+      - getCSSNumber(elem, 'margin-right')
+      - getCSSNumber(elem, 'border-left')
+      - getCSSNumber(elem, 'border-right');
 
-    const actualHeight = box.height - getCSSNumber(elem, 'paddingTop')
-      - getCSSNumber(elem, 'paddingBottom')
-      - getCSSNumber(elem, 'marginTop')
-      - getCSSNumber(elem, 'marginBottom')
-      - getCSSNumber(elem, 'borderTop')
-      - getCSSNumber(elem, 'borderBottom');
+    const actualHeight = box.height - getCSSNumber(elem, 'padding-top')
+      - getCSSNumber(elem, 'padding-bottom')
+      - getCSSNumber(elem, 'margin-top')
+      - getCSSNumber(elem, 'margin-bottom')
+      - getCSSNumber(elem, 'border-top')
+      - getCSSNumber(elem, 'border-bottom');
 
@@ -191,0 +191,0 @@ positionElement(elem, box.left, box.top, actualWidth, actualHeight,

tests/karma.conf.js

 // Karma configuration
 // Generated on Wed Sep 03 2014 13:49:54 GMT+1000 (EST)
 
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
 module.exports = (config) => {
-  const browser = 'chrome';
   config.set({
@@ -43,3 +44,3 @@
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress', 'coverage', 'saucelabs'],
+    reporters: ['progress', 'coverage'],
 
@@ -51,7 +52,2 @@ coverageReporter: {
 
-    sauceLabs: {
-      startConnect: false,
-      tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
-    },
-
     // web server port
@@ -72,3 +68,3 @@ port: 9876,
 
-    browsers: [browser[0].toUpperCase() + browser.substr(1)],
+    browsers: ['ChromeHeadless'],
 
@@ -75,0 +71,0 @@

tests/unit/opentok-layout-spec.js

@@ -317,2 +317,20 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
 
+      it('takes margin CSS styles into account', () => {
+        const style = document.createElement('style');
+        style.innerHTML = '.div { margin: 5px; }';
+        document.head.appendChild(style);
+
+        div1.classList.add('div');
+        div2.classList.add('div');
+
+        const layoutContainer = initLayoutContainer(layoutDiv);
+        layoutContainer.layout();
+        const div1Rect = div1.getBoundingClientRect();
+        const div2Rect = div2.getBoundingClientRect();
+        expect(div1Rect.width).toBeCloseTo(310, 1);
+        expect(div2Rect.width).toBeCloseTo(70, 1);
+        expect(div1Rect.height).toBeCloseTo(290, 1);
+        expect(div2Rect.height).toBeCloseTo(110, 1);
+      });
+
       it('takes padding into account', () => {
@@ -319,0 +337,0 @@ div1.style.padding = '5px';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

2293

increased by0.44%

Worsened metrics

Total package byte prevSize

140176

decreased by-0.01%

Dev dependency count

18

increased by5.88%

Number of lines in readme file

251

decreased by-0.79%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes