opentok-layout-js - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

bower.json

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

opentok-layout.js

@@ -105,3 +105,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 exports.__esModule = true;
-var getBestDimensions = function (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) {
+var getBestDimensions = function (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight, evenRows) {
     var maxArea;
@@ -139,3 +139,3 @@ var targetCols;
         if (maxArea === undefined || (area >= maxArea)) {
-            if (area === maxArea && ((cols * rows) % count) > ((targetRows * targetCols) % count)) {
+            if (evenRows && area === maxArea && ((cols * rows) % count) > ((targetRows * targetCols) % count)) {
                 // We have the same area but there are more left over spots in the last row
@@ -162,3 +162,3 @@ // Let's keep the previous one
 var getLayout = function (opts, elements) {
-    var maxRatio = opts.maxRatio, minRatio = opts.minRatio, fixedRatio = opts.fixedRatio, containerWidth = opts.containerWidth, containerHeight = opts.containerHeight, _a = opts.offsetLeft, offsetLeft = _a === void 0 ? 0 : _a, _b = opts.offsetTop, offsetTop = _b === void 0 ? 0 : _b, _c = opts.alignItems, alignItems = _c === void 0 ? 'center' : _c, _d = opts.maxWidth, maxWidth = _d === void 0 ? Infinity : _d, _e = opts.maxHeight, maxHeight = _e === void 0 ? Infinity : _e, _f = opts.scaleLastRow, scaleLastRow = _f === void 0 ? true : _f;
+    var maxRatio = opts.maxRatio, minRatio = opts.minRatio, fixedRatio = opts.fixedRatio, containerWidth = opts.containerWidth, containerHeight = opts.containerHeight, _a = opts.offsetLeft, offsetLeft = _a === void 0 ? 0 : _a, _b = opts.offsetTop, offsetTop = _b === void 0 ? 0 : _b, _c = opts.alignItems, alignItems = _c === void 0 ? 'center' : _c, _d = opts.maxWidth, maxWidth = _d === void 0 ? Infinity : _d, _e = opts.maxHeight, maxHeight = _e === void 0 ? Infinity : _e, _f = opts.scaleLastRow, scaleLastRow = _f === void 0 ? true : _f, _g = opts.evenRows, evenRows = _g === void 0 ? true : _g;
     var ratios = elements.map(function (element) { return element.height / element.width; });
@@ -168,3 +168,3 @@ var count = ratios.length;
     if (!fixedRatio) {
-        dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count, maxWidth, maxHeight);
+        dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count, maxWidth, maxHeight, evenRows);
     }
@@ -174,3 +174,3 @@ else {
         var ratio = ratios.length > 0 ? ratios[0] : null;
-        dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count, maxWidth, maxHeight);
+        dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count, maxWidth, maxHeight, evenRows);
     }
@@ -304,3 +304,3 @@ // Loop through each stream in the container and place it inside
 exports["default"] = (function (opts, elements) {
-    var _a = opts.maxRatio, maxRatio = _a === void 0 ? 3 / 2 : _a, _b = opts.minRatio, minRatio = _b === void 0 ? 9 / 16 : _b, _c = opts.fixedRatio, fixedRatio = _c === void 0 ? false : _c, _d = opts.bigPercentage, bigPercentage = _d === void 0 ? 0.8 : _d, _e = opts.minBigPercentage, minBigPercentage = _e === void 0 ? 0 : _e, _f = opts.bigFixedRatio, bigFixedRatio = _f === void 0 ? false : _f, _g = opts.bigMaxRatio, bigMaxRatio = _g === void 0 ? 3 / 2 : _g, _h = opts.bigMinRatio, bigMinRatio = _h === void 0 ? 9 / 16 : _h, _j = opts.bigFirst, bigFirst = _j === void 0 ? true : _j, _k = opts.containerWidth, containerWidth = _k === void 0 ? 640 : _k, _l = opts.containerHeight, containerHeight = _l === void 0 ? 480 : _l, _m = opts.alignItems, alignItems = _m === void 0 ? 'center' : _m, _o = opts.bigAlignItems, bigAlignItems = _o === void 0 ? 'center' : _o, _p = opts.smallAlignItems, smallAlignItems = _p === void 0 ? 'center' : _p, _q = opts.maxWidth, maxWidth = _q === void 0 ? Infinity : _q, _r = opts.maxHeight, maxHeight = _r === void 0 ? Infinity : _r, _s = opts.smallMaxWidth, smallMaxWidth = _s === void 0 ? Infinity : _s, _t = opts.smallMaxHeight, smallMaxHeight = _t === void 0 ? Infinity : _t, _u = opts.bigMaxWidth, bigMaxWidth = _u === void 0 ? Infinity : _u, _v = opts.bigMaxHeight, bigMaxHeight = _v === void 0 ? Infinity : _v, _w = opts.scaleLastRow, scaleLastRow = _w === void 0 ? true : _w, _x = opts.bigScaleLastRow, bigScaleLastRow = _x === void 0 ? true : _x;
+    var _a = opts.maxRatio, maxRatio = _a === void 0 ? 3 / 2 : _a, _b = opts.minRatio, minRatio = _b === void 0 ? 9 / 16 : _b, _c = opts.fixedRatio, fixedRatio = _c === void 0 ? false : _c, _d = opts.bigPercentage, bigPercentage = _d === void 0 ? 0.8 : _d, _e = opts.minBigPercentage, minBigPercentage = _e === void 0 ? 0 : _e, _f = opts.bigFixedRatio, bigFixedRatio = _f === void 0 ? false : _f, _g = opts.bigMaxRatio, bigMaxRatio = _g === void 0 ? 3 / 2 : _g, _h = opts.bigMinRatio, bigMinRatio = _h === void 0 ? 9 / 16 : _h, _j = opts.bigFirst, bigFirst = _j === void 0 ? true : _j, _k = opts.containerWidth, containerWidth = _k === void 0 ? 640 : _k, _l = opts.containerHeight, containerHeight = _l === void 0 ? 480 : _l, _m = opts.alignItems, alignItems = _m === void 0 ? 'center' : _m, _o = opts.bigAlignItems, bigAlignItems = _o === void 0 ? 'center' : _o, _p = opts.smallAlignItems, smallAlignItems = _p === void 0 ? 'center' : _p, _q = opts.maxWidth, maxWidth = _q === void 0 ? Infinity : _q, _r = opts.maxHeight, maxHeight = _r === void 0 ? Infinity : _r, _s = opts.smallMaxWidth, smallMaxWidth = _s === void 0 ? Infinity : _s, _t = opts.smallMaxHeight, smallMaxHeight = _t === void 0 ? Infinity : _t, _u = opts.bigMaxWidth, bigMaxWidth = _u === void 0 ? Infinity : _u, _v = opts.bigMaxHeight, bigMaxHeight = _v === void 0 ? Infinity : _v, _w = opts.scaleLastRow, scaleLastRow = _w === void 0 ? true : _w, _x = opts.bigScaleLastRow, bigScaleLastRow = _x === void 0 ? true : _x, _y = opts.evenRows, evenRows = _y === void 0 ? true : _y;
     var availableRatio = containerHeight / containerWidth;
@@ -336,3 +336,3 @@ var offsetLeft = 0;
                 if (!bigFixedRatio) {
-                    bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+                    bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
                 }
@@ -342,3 +342,3 @@ else {
                     var ratio = bigOnes[0].height / bigOnes[0].width;
-                    bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+                    bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
                 }
@@ -359,3 +359,4 @@ bigHeight = Math.max(containerHeight * minBigPercentage, Math.min(bigHeight, bigDimensions.targetHeight * bigDimensions.targetRows));
                     maxHeight: smallMaxHeight,
-                    scaleLastRow: scaleLastRow
+                    scaleLastRow: scaleLastRow,
+                    evenRows: evenRows
                 }, smallOnes);
@@ -390,3 +391,3 @@ var smallHeight_1 = 0;
                 if (!bigFixedRatio) {
-                    bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+                    bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
                 }
@@ -396,3 +397,3 @@ else {
                     var ratio = bigOnes[0].height / bigOnes[0].width;
-                    bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+                    bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
                 }
@@ -413,3 +414,4 @@ bigWidth = Math.max(containerWidth * minBigPercentage, Math.min(bigWidth, bigDimensions.targetWidth * bigDimensions.targetCols));
                     maxHeight: smallMaxHeight,
-                    scaleLastRow: scaleLastRow
+                    scaleLastRow: scaleLastRow,
+                    evenRows: evenRows
                 }, smallOnes);
@@ -496,3 +498,4 @@ var smallWidth_1 = 0;
             maxHeight: bigMaxHeight,
-            scaleLastRow: bigScaleLastRow
+            scaleLastRow: bigScaleLastRow,
+            evenRows: evenRows
         }, bigOnes);
@@ -512,3 +515,4 @@ }
             maxHeight: areas.big ? smallMaxHeight : maxHeight,
-            scaleLastRow: scaleLastRow
+            scaleLastRow: scaleLastRow,
+            evenRows: evenRows
         }, smallOnes);
@@ -515,0 +519,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 i(o){if(e[o])return e[o].exports;var a=e[o]={i:o,l:!1,exports:{}};return t[o].call(a.exports,a,a.exports,i),a.l=!0,a.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 a in t)i.d(o,a,function(e){return t[e]}.bind(null,a));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=1)}([function(t,e,i){"use strict";e.__esModule=!0;var o=function(t,e,i,o,a,n,r){for(var h,d,f,l,s,g,c,u,v=1;v<=a;v+=1){var p=v,m=Math.ceil(a/p);(u=(c=Math.floor(o/m))/(g=Math.floor(i/p)))>e?c=g*(u=e):u<t&&(g=c/(u=t));var b=(g=Math.min(n,g))*(c=Math.min(r,c))*a;if(void 0===h||b>=h){if(b===h&&p*m%a>f*d%a)continue;h=b,l=c,s=g,d=p,f=m}}return{maxArea:h,targetCols:d,targetRows:f,targetHeight:l,targetWidth:s,ratio:l/s}},a=function(t,e){var i,a=t.maxRatio,n=t.minRatio,r=t.fixedRatio,h=t.containerWidth,d=t.containerHeight,f=t.offsetLeft,l=void 0===f?0:f,s=t.offsetTop,g=void 0===s?0:s,c=t.alignItems,u=void 0===c?"center":c,v=t.maxWidth,p=void 0===v?1/0:v,m=t.maxHeight,b=void 0===m?1/0:m,w=t.scaleLastRow,x=void 0===w||w,y=e.map((function(t){return t.height/t.width})),M=y.length;if(r){var R=y.length>0?y[0]:null;i=o(R,R,h,d,M,p,b)}else i=o(n,a,h,d,M,p,b);for(var H,W=0,L=0,_=[],O=[],j=0;j<y.length;j+=1){j%i.targetCols==0&&(H={ratios:[],elements:[],width:0,height:0},_.push(H));R=y[j];var T=e[j];H.elements.push(T),H.ratios.push(R);var I=i.targetWidth,S=i.targetHeight;(r||T.fixedRatio)&&(I=S/R),H.width+=I,H.height=S}var C=0,P=0;for(j=0;j<_.length;j+=1)(H=_[j]).width>h?(H.height=Math.floor(H.height*(h/H.width)),H.width=h):H.width<h&&H.height<b&&(P+=1),C+=H.height;if(x&&C<d&&P>0){var A=d-C;C=0;for(j=0;j<_.length;j+=1){if((H=_[j]).width<h){var E=A/P;E/H.height>(h-H.width)/H.width&&(E=Math.floor((h-H.width)/H.width*H.height)),H.width+=Math.floor(E/H.height*H.width),H.height+=E,A-=E,P-=1}C+=H.height}}switch(u){case"start":L=0;break;case"end":L=d-C;break;case"center":default:L=(d-C)/2}for(j=0;j<_.length;j+=1){H=_[j];var k=void 0;switch(u){case"start":k=0;break;case"end":k=h-H.width;break;case"center":default:k=(h-H.width)/2}W=k;S=void 0;for(var q=0;q<H.ratios.length;q+=1){R=H.ratios[q],T=H.elements[q],I=i.targetWidth;S=H.height,r||T.fixedRatio?I=Math.floor(S/R):S/I!=i.targetHeight/i.targetWidth&&(I=Math.floor(i.targetWidth/i.targetHeight*S)),O.push({left:W+l,top:L+g,width:I,height:S}),W+=I}L+=S}return O};e.default=function(t,e){var i,n=t.maxRatio,r=void 0===n?1.5:n,h=t.minRatio,d=void 0===h?9/16:h,f=t.fixedRatio,l=void 0!==f&&f,s=t.bigPercentage,g=void 0===s?.8:s,c=t.minBigPercentage,u=void 0===c?0:c,v=t.bigFixedRatio,p=void 0!==v&&v,m=t.bigMaxRatio,b=void 0===m?1.5:m,w=t.bigMinRatio,x=void 0===w?9/16:w,y=t.bigFirst,M=void 0===y||y,R=t.containerWidth,H=void 0===R?640:R,W=t.containerHeight,L=void 0===W?480:W,_=t.alignItems,O=void 0===_?"center":_,j=t.bigAlignItems,T=void 0===j?"center":j,I=t.smallAlignItems,S=void 0===I?"center":I,C=t.maxWidth,P=void 0===C?1/0:C,A=t.maxHeight,E=void 0===A?1/0:A,k=t.smallMaxWidth,q=void 0===k?1/0:k,N=t.smallMaxHeight,F=void 0===N?1/0:N,$=t.bigMaxWidth,z=void 0===$?1/0:$,B=t.bigMaxHeight,V=void 0===B?1/0:B,D=t.scaleLastRow,G=void 0===D||D,J=t.bigScaleLastRow,K=void 0===J||J,Q=L/H,U=0,X=0,Y=0,Z=0,tt=[],et=e.filter((function(t,e){return!!t.big&&(tt.push(e),!0)})),it=e.filter((function(t){return!t.big})),ot=[],at=[],nt={};if(et.length>0&&it.length>0){var rt=void 0,ht=void 0,dt=!0===M;if(Q>(i=et[0]).height/i.width){if(rt=H,ht=Math.floor(L*g),u>0){var ft=void 0;if(p){var lt=et[0].height/et[0].width;ft=o(lt,lt,rt,ht,et.length,z,V)}else ft=o(x,b,rt,ht,et.length,z,V);ht=Math.max(L*u,Math.min(ht,ft.targetHeight*ft.targetRows));var st=a({containerWidth:H,containerHeight:L-ht,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:S,maxWidth:q,maxHeight:F,scaleLastRow:G},it),gt=0,ct=void 0;st.forEach((function(t){ct!==t.top&&(ct=t.top,gt+=t.height)})),ht=Math.max(ht,L-gt)}Y=L-(X=ht),"column"===M?dt=!1:"row"===M&&(dt=!0)}else{if(ht=L,rt=Math.floor(H*g),u>0){ft=void 0;if(p){lt=et[0].height/et[0].width;ft=o(lt,lt,rt,ht,et.length,z,V)}else ft=o(x,b,rt,ht,et.length,z,V);rt=Math.max(H*u,Math.min(rt,ft.targetWidth*ft.targetCols));var ut=a({containerWidth:H-rt,containerHeight:L,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:S,maxWidth:q,maxHeight:F,scaleLastRow:G},it),vt=0,pt=0,mt=0;ut.forEach((function(t){t.top!==mt&&(pt=0,mt=t.top),pt+=t.width,vt=Math.max(vt,pt)})),rt=Math.max(rt,H-vt)}Z=H-(U=rt),"column"===M?dt=!0:"row"===M&&(dt=!1)}dt?(nt.big={top:0,left:0,width:rt,height:ht},nt.small={top:X,left:U,width:H-U,height:L-X}):(nt.big={left:Z,top:Y,width:rt,height:ht},nt.small={top:0,left:0,width:H-U,height:L-X})}else et.length>0&&0===it.length?nt.big={top:0,left:0,width:H,height:L}:nt.small={top:X,left:U,width:H-U,height:L-X};nt.big&&(ot=a({containerWidth:nt.big.width,containerHeight:nt.big.height,offsetLeft:nt.big.left,offsetTop:nt.big.top,fixedRatio:p,minRatio:x,maxRatio:b,alignItems:T,maxWidth:z,maxHeight:V,scaleLastRow:K},et)),nt.small&&(at=a({containerWidth:nt.small.width,containerHeight:nt.small.height,offsetLeft:nt.small.left,offsetTop:nt.small.top,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:nt.big?S:O,maxWidth:nt.big?q:P,maxHeight:nt.big?F:E,scaleLastRow:G},it));var bt=[],wt=0,xt=0;return e.forEach((function(t,e){tt.indexOf(e)>-1?(bt[e]=ot[wt],wt+=1):(bt[e]=at[xt],xt+=1)})),{boxes:bt,areas:nt}}},function(t,e,i){"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 a=e[o]={i:o,l:!1,exports:{}};return t[o].call(a.exports,a,a.exports,i),a.l=!0,a.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 a in t)i.d(o,a,function(e){return t[e]}.bind(null,a));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=1)}([function(t,e,i){"use strict";e.__esModule=!0;var o=function(t,e,i,o,a,n,r,h){for(var d,f,l,s,g,c,u,v,p=1;p<=a;p+=1){var m=p,b=Math.ceil(a/m);(v=(u=Math.floor(o/b))/(c=Math.floor(i/m)))>e?u=c*(v=e):v<t&&(c=u/(v=t));var w=(c=Math.min(n,c))*(u=Math.min(r,u))*a;if(void 0===d||w>=d){if(h&&w===d&&m*b%a>l*f%a)continue;d=w,s=u,g=c,f=m,l=b}}return{maxArea:d,targetCols:f,targetRows:l,targetHeight:s,targetWidth:g,ratio:s/g}},a=function(t,e){var i,a=t.maxRatio,n=t.minRatio,r=t.fixedRatio,h=t.containerWidth,d=t.containerHeight,f=t.offsetLeft,l=void 0===f?0:f,s=t.offsetTop,g=void 0===s?0:s,c=t.alignItems,u=void 0===c?"center":c,v=t.maxWidth,p=void 0===v?1/0:v,m=t.maxHeight,b=void 0===m?1/0:m,w=t.scaleLastRow,x=void 0===w||w,y=t.evenRows,R=void 0===y||y,M=e.map((function(t){return t.height/t.width})),H=M.length;if(r){var W=M.length>0?M[0]:null;i=o(W,W,h,d,H,p,b,R)}else i=o(n,a,h,d,H,p,b,R);for(var L,_=0,O=0,j=[],T=[],I=0;I<M.length;I+=1){I%i.targetCols==0&&(L={ratios:[],elements:[],width:0,height:0},j.push(L));W=M[I];var S=e[I];L.elements.push(S),L.ratios.push(W);var C=i.targetWidth,P=i.targetHeight;(r||S.fixedRatio)&&(C=P/W),L.width+=C,L.height=P}var A=0,E=0;for(I=0;I<j.length;I+=1)(L=j[I]).width>h?(L.height=Math.floor(L.height*(h/L.width)),L.width=h):L.width<h&&L.height<b&&(E+=1),A+=L.height;if(x&&A<d&&E>0){var k=d-A;A=0;for(I=0;I<j.length;I+=1){if((L=j[I]).width<h){var q=k/E;q/L.height>(h-L.width)/L.width&&(q=Math.floor((h-L.width)/L.width*L.height)),L.width+=Math.floor(q/L.height*L.width),L.height+=q,k-=q,E-=1}A+=L.height}}switch(u){case"start":O=0;break;case"end":O=d-A;break;case"center":default:O=(d-A)/2}for(I=0;I<j.length;I+=1){L=j[I];var N=void 0;switch(u){case"start":N=0;break;case"end":N=h-L.width;break;case"center":default:N=(h-L.width)/2}_=N;P=void 0;for(var F=0;F<L.ratios.length;F+=1){W=L.ratios[F],S=L.elements[F],C=i.targetWidth;P=L.height,r||S.fixedRatio?C=Math.floor(P/W):P/C!=i.targetHeight/i.targetWidth&&(C=Math.floor(i.targetWidth/i.targetHeight*P)),T.push({left:_+l,top:O+g,width:C,height:P}),_+=C}O+=P}return T};e.default=function(t,e){var i,n=t.maxRatio,r=void 0===n?1.5:n,h=t.minRatio,d=void 0===h?9/16:h,f=t.fixedRatio,l=void 0!==f&&f,s=t.bigPercentage,g=void 0===s?.8:s,c=t.minBigPercentage,u=void 0===c?0:c,v=t.bigFixedRatio,p=void 0!==v&&v,m=t.bigMaxRatio,b=void 0===m?1.5:m,w=t.bigMinRatio,x=void 0===w?9/16:w,y=t.bigFirst,R=void 0===y||y,M=t.containerWidth,H=void 0===M?640:M,W=t.containerHeight,L=void 0===W?480:W,_=t.alignItems,O=void 0===_?"center":_,j=t.bigAlignItems,T=void 0===j?"center":j,I=t.smallAlignItems,S=void 0===I?"center":I,C=t.maxWidth,P=void 0===C?1/0:C,A=t.maxHeight,E=void 0===A?1/0:A,k=t.smallMaxWidth,q=void 0===k?1/0:k,N=t.smallMaxHeight,F=void 0===N?1/0:N,$=t.bigMaxWidth,z=void 0===$?1/0:$,B=t.bigMaxHeight,V=void 0===B?1/0:B,D=t.scaleLastRow,G=void 0===D||D,J=t.bigScaleLastRow,K=void 0===J||J,Q=t.evenRows,U=void 0===Q||Q,X=L/H,Y=0,Z=0,tt=0,et=0,it=[],ot=e.filter((function(t,e){return!!t.big&&(it.push(e),!0)})),at=e.filter((function(t){return!t.big})),nt=[],rt=[],ht={};if(ot.length>0&&at.length>0){var dt=void 0,ft=void 0,lt=!0===R;if(X>(i=ot[0]).height/i.width){if(dt=H,ft=Math.floor(L*g),u>0){var st=void 0;if(p){var gt=ot[0].height/ot[0].width;st=o(gt,gt,dt,ft,ot.length,z,V,U)}else st=o(x,b,dt,ft,ot.length,z,V,U);ft=Math.max(L*u,Math.min(ft,st.targetHeight*st.targetRows));var ct=a({containerWidth:H,containerHeight:L-ft,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:S,maxWidth:q,maxHeight:F,scaleLastRow:G,evenRows:U},at),ut=0,vt=void 0;ct.forEach((function(t){vt!==t.top&&(vt=t.top,ut+=t.height)})),ft=Math.max(ft,L-ut)}tt=L-(Z=ft),"column"===R?lt=!1:"row"===R&&(lt=!0)}else{if(ft=L,dt=Math.floor(H*g),u>0){st=void 0;if(p){gt=ot[0].height/ot[0].width;st=o(gt,gt,dt,ft,ot.length,z,V,U)}else st=o(x,b,dt,ft,ot.length,z,V,U);dt=Math.max(H*u,Math.min(dt,st.targetWidth*st.targetCols));var pt=a({containerWidth:H-dt,containerHeight:L,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:S,maxWidth:q,maxHeight:F,scaleLastRow:G,evenRows:U},at),mt=0,bt=0,wt=0;pt.forEach((function(t){t.top!==wt&&(bt=0,wt=t.top),bt+=t.width,mt=Math.max(mt,bt)})),dt=Math.max(dt,H-mt)}et=H-(Y=dt),"column"===R?lt=!0:"row"===R&&(lt=!1)}lt?(ht.big={top:0,left:0,width:dt,height:ft},ht.small={top:Z,left:Y,width:H-Y,height:L-Z}):(ht.big={left:et,top:tt,width:dt,height:ft},ht.small={top:0,left:0,width:H-Y,height:L-Z})}else ot.length>0&&0===at.length?ht.big={top:0,left:0,width:H,height:L}:ht.small={top:Z,left:Y,width:H-Y,height:L-Z};ht.big&&(nt=a({containerWidth:ht.big.width,containerHeight:ht.big.height,offsetLeft:ht.big.left,offsetTop:ht.big.top,fixedRatio:p,minRatio:x,maxRatio:b,alignItems:T,maxWidth:z,maxHeight:V,scaleLastRow:K,evenRows:U},ot)),ht.small&&(rt=a({containerWidth:ht.small.width,containerHeight:ht.small.height,offsetLeft:ht.small.left,offsetTop:ht.small.top,fixedRatio:l,minRatio:d,maxRatio:r,alignItems:ht.big?S:O,maxWidth:ht.big?q:P,maxHeight:ht.big?F:E,scaleLastRow:G,evenRows:U},at));var xt=[],yt=0,Rt=0;return e.forEach((function(t,e){it.indexOf(e)>-1?(xt[e]=nt[yt],yt+=1):(xt[e]=rt[Rt],Rt+=1)})),{boxes:xt,areas:ht}}},function(t,e,i){"use strict";
 /*!
@@ -3,0 +3,0 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)

package.json

 {
   "name": "opentok-layout-js",
-  "version": "5.3.0",
+  "version": "5.4.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.",
@@ -5,0 +5,0 @@ "main": "opentok-layout.js",

README.md

@@ -53,2 +53,3 @@ [![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")
                                // You can also pass 'column' or 'row' to change whether big is first when you are in a row (bottom) or a column (right) layout
+    evenRows: true,            // Whether or not to favor an even number of elements on each row
     animate: true,             // Whether you want to animate the transitions using jQuery (not recommended, use CSS transitions instead)
@@ -55,0 +56,0 @@ window: window,            // Lets you pass in your own window object which should be the same window that the element is in

src/getLayout.ts

@@ -5,3 +5,3 @@ /// <reference path="../types/opentok-layout-js.d.ts" />
 
-const getBestDimensions = (minRatio: number, maxRatio: number, Width: number, Height: number, count: number, maxWidth: number, maxHeight: number) => {
+const getBestDimensions = (minRatio: number, maxRatio: number, Width: number, Height: number, count: number, maxWidth: number, maxHeight: number, evenRows: boolean) => {
   let maxArea: number;
@@ -44,3 +44,3 @@ let targetCols: number;
     if (maxArea === undefined || (area >= maxArea)) {
-      if (area === maxArea && ((cols * rows) % count) > ((targetRows * targetCols) % count)) {
+      if (evenRows && area === maxArea && ((cols * rows) % count) > ((targetRows * targetCols) % count)) {
         // We have the same area but there are more left over spots in the last row
@@ -94,2 +94,3 @@ // Let's keep the previous one
     scaleLastRow = true,
+    evenRows = true,
   } = opts;
@@ -104,3 +105,3 @@ const ratios = elements.map(element => element.height / element.width);
     dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count,
-      maxWidth, maxHeight);
+      maxWidth, maxHeight, evenRows);
   } else {
@@ -110,3 +111,3 @@ // Use the ratio of the first video element we find to approximate
     dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count,
-      maxWidth, maxHeight);
+      maxWidth, maxHeight, evenRows);
   }
@@ -266,2 +267,3 @@
     bigScaleLastRow = true,
+    evenRows = true,
   } = opts;
@@ -301,3 +303,3 @@
           bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth,
-            bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+            bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
         } else {
@@ -307,3 +309,3 @@ // Use the ratio of the first video element we find to approximate
           bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight,
-            bigOnes.length, bigMaxWidth, bigMaxHeight);
+            bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
         }
@@ -326,2 +328,3 @@ bigHeight = Math.max(containerHeight * minBigPercentage,
           scaleLastRow,
+          evenRows,
         }, smallOnes);
@@ -355,3 +358,3 @@ let smallHeight = 0
           bigDimensions = getBestDimensions(bigMinRatio, bigMaxRatio, bigWidth,
-            bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight);
+            bigHeight, bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
         } else {
@@ -361,3 +364,3 @@ // Use the ratio of the first video element we find to approximate
           bigDimensions = getBestDimensions(ratio, ratio, bigWidth, bigHeight,
-            bigOnes.length, bigMaxWidth, bigMaxHeight);
+            bigOnes.length, bigMaxWidth, bigMaxHeight, evenRows);
         }
@@ -380,2 +383,3 @@ bigWidth = Math.max(containerWidth * minBigPercentage,
           scaleLastRow,
+          evenRows,
         }, smallOnes);
@@ -460,2 +464,3 @@ let smallWidth = 0
       scaleLastRow: bigScaleLastRow,
+      evenRows,
     }, bigOnes);
@@ -476,2 +481,3 @@ }
       scaleLastRow,
+      evenRows,
     }, smallOnes);
@@ -478,0 +484,0 @@ }

tests/unit/opentok-layout-spec.js

@@ -607,6 +607,7 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
 
-    it('favours an even distribution of elements in each row', () => {
+    it('favours an even distribution of elements in each row with evenRows true', () => {
       const layoutContainer = initLayoutContainer(layoutDiv, {
         maxWidth: 400,
         maxHeight: 300,
+        evenRows: true,
       });
@@ -621,2 +622,3 @@ layoutContainer.layout();
       }
+      // 2 on each row
       rect = divs[0].getBoundingClientRect();
@@ -635,2 +637,31 @@ expect(rect.left).toBeCloseTo(240, 1);
     });
+
+    it('does not favours an even distribution of elements in each row with evenRows false', () => {
+      const layoutContainer = initLayoutContainer(layoutDiv, {
+        maxWidth: 400,
+        maxHeight: 300,
+        evenRows: false,
+      });
+      layoutContainer.layout();
+      // Expect them to all have the same width and height
+      let rect;
+      for (let i = 0; i < divs.length; i += 1) {
+        rect = divs[i].getBoundingClientRect();
+        expect(rect.width).toBe(400);
+        expect(rect.height).toBe(300);
+      }
+      // 3 on same row, 1 on next row
+      rect = divs[0].getBoundingClientRect();
+      expect(rect.left).toBeCloseTo(40, 1);
+      expect(rect.top).toBeCloseTo(60, 1);
+      rect = divs[1].getBoundingClientRect();
+      expect(rect.left).toBeCloseTo(440, 1);
+      expect(rect.top).toBeCloseTo(60, 1);
+      rect = divs[2].getBoundingClientRect();
+      expect(rect.left).toBeCloseTo(840, 1);
+      expect(rect.top).toBeCloseTo(60, 1);
+      rect = divs[3].getBoundingClientRect();
+      expect(rect.left).toBeCloseTo(440, 1);
+      expect(rect.top).toBeCloseTo(360, 1);
+    });
   });
@@ -637,0 +668,0 @@

types/opentok-layout-js.d.ts

@@ -35,2 +35,3 @@ declare module 'opentok-layout-js' {
     bigScaleLastRow?: boolean;
+    evenRows?: boolean;
     onLayout?: OnLayout,
@@ -37,0 +38,0 @@ window?: Window;

No alert changes

Improved metrics

Total package byte prevSize

176474

increased by1.37%

Lines of code

2836

increased by1.47%

Number of lines in readme file

259

increased by0.39%

No dependency changes