opentok-layout-js - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

bower.json

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

opentok-layout.js

@@ -104,3 +104,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-var getBestDimensions = function getBestDimensions(minRatio, maxRatio, Width, Height, count) {
+var getBestDimensions = function getBestDimensions(minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) {
   var maxArea = void 0;
@@ -136,6 +136,9 @@ var targetCols = void 0;
 
+    tWidth = Math.min(maxWidth, tWidth);
+    tHeight = Math.min(maxHeight, tHeight);
+
     var area = tWidth * tHeight * count;
 
     // If this width and height takes up the most space then we're going with that
-    if (maxArea === undefined || area > maxArea) {
+    if (maxArea === undefined || area >= maxArea) {
       maxArea = area;
@@ -169,3 +172,7 @@ targetHeight = tHeight;
       _opts$alignItems = opts.alignItems,
-      alignItems = _opts$alignItems === undefined ? 'center' : _opts$alignItems;
+      alignItems = _opts$alignItems === undefined ? 'center' : _opts$alignItems,
+      _opts$maxWidth = opts.maxWidth,
+      maxWidth = _opts$maxWidth === undefined ? Infinity : _opts$maxWidth,
+      _opts$maxHeight = opts.maxHeight,
+      maxHeight = _opts$maxHeight === undefined ? Infinity : _opts$maxHeight;
 
@@ -180,7 +187,7 @@ var ratios = elements.map(function (element) {
   if (!fixedRatio) {
-    dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count);
+    dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count, maxWidth, maxHeight);
   } else {
     // Use the ratio of the first video element we find to approximate
     var ratio = ratios.length > 0 ? ratios[0] : null;
-    dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count);
+    dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count, maxWidth, maxHeight);
   }
@@ -227,3 +234,3 @@
       row.width = containerWidth;
-    } else if (row.width < containerWidth) {
+    } else if (row.width < containerWidth && row.height < maxHeight) {
       remainingShortRows += 1;
@@ -340,3 +347,11 @@ }
       _opts$smallAlignItems = opts.smallAlignItems,
-      smallAlignItems = _opts$smallAlignItems === undefined ? 'center' : _opts$smallAlignItems;
+      smallAlignItems = _opts$smallAlignItems === undefined ? 'center' : _opts$smallAlignItems,
+      _opts$smallMaxWidth = opts.smallMaxWidth,
+      smallMaxWidth = _opts$smallMaxWidth === undefined ? Infinity : _opts$smallMaxWidth,
+      _opts$smallMaxHeight = opts.smallMaxHeight,
+      smallMaxHeight = _opts$smallMaxHeight === undefined ? Infinity : _opts$smallMaxHeight,
+      _opts$bigMaxWidth = opts.bigMaxWidth,
+      bigMaxWidth = _opts$bigMaxWidth === undefined ? Infinity : _opts$bigMaxWidth,
+      _opts$bigMaxHeight = opts.bigMaxHeight,
+      bigMaxHeight = _opts$bigMaxHeight === undefined ? Infinity : _opts$bigMaxHeight;
 
@@ -390,3 +405,5 @@
         maxRatio: bigMaxRatio,
-        alignItems: bigAlignItems
+        alignItems: bigAlignItems,
+        maxWidth: bigMaxWidth,
+        maxHeight: bigMaxHeight
       }, bigOnes);
@@ -401,3 +418,5 @@ smallBoxes = getLayout({
         maxRatio: maxRatio,
-        alignItems: smallAlignItems
+        alignItems: smallAlignItems,
+        maxWidth: smallMaxWidth,
+        maxHeight: smallMaxHeight
       }, smallOnes);
@@ -413,3 +432,5 @@ } else {
         maxRatio: maxRatio,
-        alignItems: smallAlignItems
+        alignItems: smallAlignItems,
+        maxWidth: smallMaxWidth,
+        maxHeight: smallMaxHeight
       }, smallOnes);
@@ -423,3 +444,5 @@ bigBoxes = getLayout({
         minRatio: bigMinRatio,
-        alignItems: bigAlignItems
+        alignItems: bigAlignItems,
+        maxWidth: bigMaxWidth,
+        maxHeight: bigMaxHeight
       }, bigOnes);
@@ -435,3 +458,5 @@ }
       maxRatio: bigMaxRatio,
-      alignItems: bigAlignItems
+      alignItems: bigAlignItems,
+      maxWidth: bigMaxWidth,
+      maxHeight: bigMaxHeight
     }, bigOnes);
@@ -447,3 +472,5 @@ } else {
       maxRatio: maxRatio,
-      alignItems: alignItems
+      alignItems: alignItems,
+      maxWidth: smallMaxWidth,
+      maxHeight: smallMaxHeight
     }, smallOnes);
@@ -450,0 +477,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 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=2)}([function(t,e,i){"use strict";var o=function(t,e,i,o,n){for(var r=void 0,a=void 0,d=void 0,f=void 0,h=void 0,u=void 0,s=void 0,c=void 0,l=1;l<=n;l+=1){var g=l,v=Math.ceil(n/g);(c=(s=Math.floor(o/v))/(u=Math.floor(i/g)))>e?s=u*(c=e):c<t&&(u=s/(c=t));var p=u*s*n;(void 0===r||p>r)&&(r=p,f=s,h=u,a=g,d=v)}return{maxArea:r,targetCols:a,targetRows:d,targetHeight:f,targetWidth:h,ratio:f/h}},n=function(t,e){var i=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,f=t.offsetLeft,h=void 0===f?0:f,u=t.offsetTop,s=void 0===u?0:u,c=t.alignItems,l=void 0===c?"center":c,g=e.map(function(t){return t.height/t.width}),v=g.length,p=void 0;if(r){var m=g.length>0?g[0]:null;p=o(m,m,a,d,v)}else p=o(n,i,a,d,v);for(var y=0,b=0,w=[],x=void 0,R=[],H=0;H<g.length;H+=1){H%p.targetCols==0&&(x={ratios:[],width:0,height:0},w.push(x));var W=g[H];x.ratios.push(W);var M=p.targetWidth,L=p.targetHeight;r&&(M=L/W),x.width+=M,x.height=L}for(var T=0,S=0,I=0;I<w.length;I+=1)(x=w[I]).width>a?(x.height=Math.floor(x.height*(a/x.width)),x.width=a):x.width<a&&(S+=1),T+=x.height;if(T<d&&S>0){var O=d-T;T=0;for(var j=0;j<w.length;j+=1){if((x=w[j]).width<a){var _=O/S;_/x.height>(a-x.width)/x.width&&(_=Math.floor((a-x.width)/x.width*x.height)),x.width+=Math.floor(_/x.height*x.width),x.height+=_,O-=_,S-=1}T+=x.height}}switch(l){case"start":b=0;break;case"end":b=d-T;break;case"center":default:b=(d-T)/2}for(var A=0;A<w.length;A+=1){x=w[A];var C=void 0;switch(l){case"start":C=0;break;case"end":C=a-x.width;break;case"center":default:C=(a-x.width)/2}y=C;for(var P=void 0,k=0;k<x.ratios.length;k+=1){var E=x.ratios[k],q=p.targetWidth;P=x.height,r?q=Math.floor(P/E):P/q!=p.targetHeight/p.targetWidth&&(q=Math.floor(p.targetWidth/p.targetHeight*P)),R.push({left:y+h,top:b+s,width:q,height:P}),y+=q}b+=P}return R};t.exports=function(t,e){var i=t.maxRatio,o=void 0===i?1.5:i,r=t.minRatio,a=void 0===r?9/16:r,d=t.fixedRatio,f=void 0!==d&&d,h=t.bigPercentage,u=void 0===h?.8:h,s=t.bigFixedRatio,c=void 0!==s&&s,l=t.bigMaxRatio,g=void 0===l?1.5:l,v=t.bigMinRatio,p=void 0===v?9/16:v,m=t.bigFirst,y=void 0===m||m,b=t.containerWidth,w=void 0===b?640:b,x=t.containerHeight,R=void 0===x?480:x,H=t.alignItems,W=void 0===H?"center":H,M=t.bigAlignItems,L=void 0===M?"center":M,T=t.smallAlignItems,S=void 0===T?"center":T,I=R/w,O=0,j=0,_=0,A=0,C=[],P=e.filter(function(t,e){return!!t.big&&(C.push(e),!0)}),k=e.filter(function(t){return!t.big}),E=[],q=[];if(P.length>0&&k.length>0){var B=void 0,N=void 0;I>function(t){return t.height/t.width}(P[0])?(B=w,_=R-(j=N=Math.floor(R*u))):(N=R,A=w-(O=B=Math.floor(w*u))),y?(E=n({containerWidth:B,containerHeight:N,offsetLeft:0,offsetTop:0,fixedRatio:c,minRatio:p,maxRatio:g,alignItems:L},P),q=n({containerWidth:w-O,containerHeight:R-j,offsetLeft:O,offsetTop:j,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S},k)):(q=n({containerWidth:w-O,containerHeight:R-j,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S},k),E=n({containerWidth:B,containerHeight:N,offsetLeft:A,offsetTop:_,fixedRatio:c,minRatio:p,alignItems:L},P))}else P.length>0&&0===k.length?E=n({containerWidth:w,containerHeight:R,fixedRatio:c,minRatio:p,maxRatio:g,alignItems:L},P):q=n({containerWidth:w-O,containerHeight:R-j,offsetLeft:O,offsetTop:j,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W},k);var F=[],$=0,V=0;return e.forEach(function(t,e){C.indexOf(e)>-1?(F[e]=E[$],$+=1):(F[e]=q[V],V+=1)}),F}},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(0);t.exports=function(t,e){function i(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(e){i(t,e,n[e])}),NaN;var a=(e&&e.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},a=e.animate,d=void 0!==a&&a,f=e.bigClass,h=void 0===f?"OT_big":f,u=e.ignoreClass,s=void 0===u?"OT_ignore":u;if("none"!==i(t,"display")){var c=t.getAttribute("id");c||(c="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",c)),e.containerHeight=function(t){var e=function(t){return t.offsetHeight>0?t.offsetHeight+"px":i(t,"height")}(t);return e?parseInt(e,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),e.containerWidth=function(t){var e=function(t){return t.offsetWidth>0?t.offsetWidth+"px":i(t,"width")}(t);return e?parseInt(e,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var l=Array.prototype.filter.call(t.querySelectorAll("#"+c+">*:not(."+s+")"),function(t){return"none"!==i(t,"display")}),g=l.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(h),e});n(e,g).forEach(function(t,e){var o=l[e];i(o,"position","absolute");var n=t.width-r(o,"paddingLeft")-r(o,"paddingRight")-r(o,"marginLeft")-r(o,"marginRight")-r(o,"borderLeft")-r(o,"borderRight"),a=t.height-r(o,"paddingTop")-r(o,"paddingBottom")-r(o,"marginTop")-r(o,"marginBottom")-r(o,"borderTop")-r(o,"borderBottom");!function(t,e,o,n,r,a){var d=this,f={left:e+"px",top:o+"px",width:n+"px",height:r+"px"},h=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=n+"px",e.style.width=i||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(d)})):(i(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(o,t.left,t.top,n,a,d)})}}},function(t,e,i){"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=2)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,f=void 0,h=void 0,u=void 0,g=void 0,s=void 0,l=void 0,c=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(c=(l=Math.floor(o/p))/(s=Math.floor(e/m)))>i?l=s*(c=i):c<t&&(s=l/(c=t));var x=(s=Math.min(r,s))*(l=Math.min(a,l))*n;(void 0===d||x>=d)&&(d=x,u=l,g=s,f=m,h=p)}return{maxArea:d,targetCols:f,targetRows:h,targetHeight:u,targetWidth:g,ratio:u/g}},n=function(t,i){var e=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,f=t.offsetLeft,h=void 0===f?0:f,u=t.offsetTop,g=void 0===u?0:u,s=t.alignItems,l=void 0===s?"center":s,c=t.maxWidth,v=void 0===c?1/0:c,m=t.maxHeight,p=void 0===m?1/0:m,x=i.map(function(t){return t.height/t.width}),b=x.length,y=void 0;if(r){var w=x.length>0?x[0]:null;y=o(w,w,a,d,b,v,p)}else y=o(n,e,a,d,b,v,p);for(var R=0,H=0,W=[],M=void 0,L=[],T=0;T<x.length;T+=1){T%y.targetCols==0&&(M={ratios:[],width:0,height:0},W.push(M));var S=x[T];M.ratios.push(S);var I=y.targetWidth,O=y.targetHeight;r&&(I=O/S),M.width+=I,M.height=O}for(var j=0,_=0,A=0;A<W.length;A+=1)(M=W[A]).width>a?(M.height=Math.floor(M.height*(a/M.width)),M.width=a):M.width<a&&M.height<p&&(_+=1),j+=M.height;if(j<d&&_>0){var C=d-j;j=0;for(var P=0;P<W.length;P+=1){if((M=W[P]).width<a){var k=C/_;k/M.height>(a-M.width)/M.width&&(k=Math.floor((a-M.width)/M.width*M.height)),M.width+=Math.floor(k/M.height*M.width),M.height+=k,C-=k,_-=1}j+=M.height}}switch(l){case"start":H=0;break;case"end":H=d-j;break;case"center":default:H=(d-j)/2}for(var E=0;E<W.length;E+=1){M=W[E];var q=void 0;switch(l){case"start":q=0;break;case"end":q=a-M.width;break;case"center":default:q=(a-M.width)/2}R=q;for(var B=void 0,N=0;N<M.ratios.length;N+=1){var F=M.ratios[N],$=y.targetWidth;B=M.height,r?$=Math.floor(B/F):B/$!=y.targetHeight/y.targetWidth&&($=Math.floor(y.targetWidth/y.targetHeight*B)),L.push({left:R+h,top:H+g,width:$,height:B}),R+=$}H+=B}return L};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,f=void 0!==d&&d,h=t.bigPercentage,u=void 0===h?.8:h,g=t.bigFixedRatio,s=void 0!==g&&g,l=t.bigMaxRatio,c=void 0===l?1.5:l,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,M=t.bigAlignItems,L=void 0===M?"center":M,T=t.smallAlignItems,S=void 0===T?"center":T,I=t.smallMaxWidth,O=void 0===I?1/0:I,j=t.smallMaxHeight,_=void 0===j?1/0:j,A=t.bigMaxWidth,C=void 0===A?1/0:A,P=t.bigMaxHeight,k=void 0===P?1/0:P,E=R/y,q=0,B=0,N=0,F=0,$=[],V=i.filter(function(t,i){return!!t.big&&($.push(i),!0)}),z=i.filter(function(t){return!t.big}),D=[],G=[];if(V.length>0&&z.length>0){var J=void 0,K=void 0;E>function(t){return t.height/t.width}(V[0])?(J=y,N=R-(B=K=Math.floor(R*u))):(K=R,F=y-(q=J=Math.floor(y*u))),x?(D=n({containerWidth:J,containerHeight:K,offsetLeft:0,offsetTop:0,fixedRatio:s,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V),G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z)):(G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z),D=n({containerWidth:J,containerHeight:K,offsetLeft:F,offsetTop:N,fixedRatio:s,minRatio:m,alignItems:L,maxWidth:C,maxHeight:k},V))}else V.length>0&&0===z.length?D=n({containerWidth:y,containerHeight:R,fixedRatio:s,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V):G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_},z);var Q=[],U=0,X=0;return i.forEach(function(t,i){$.indexOf(i)>-1?(Q[i]=D[U],U+=1):(Q[i]=G[X],X+=1)}),Q}},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,f=i.bigClass,h=void 0===f?"OT_big":f,u=i.ignoreClass,g=void 0===u?"OT_ignore":u;if("none"!==e(t,"display")){var s=t.getAttribute("id");s||(s="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",s)),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 l=Array.prototype.filter.call(t.querySelectorAll("#"+s+">*:not(."+g+")"),function(t){return"none"!==e(t,"display")}),c=l.map(function(t){var i=function(t){if(t){var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(h),i});n(i,c).forEach(function(t,i){var o=l[i];e(o,"position","absolute");var n=t.width-r(o,"paddingLeft")-r(o,"paddingRight")-r(o,"marginLeft")-r(o,"marginRight")-r(o,"borderLeft")-r(o,"borderRight"),a=t.height-r(o,"paddingTop")-r(o,"paddingBottom")-r(o,"marginTop")-r(o,"marginBottom")-r(o,"borderTop")-r(o,"borderBottom");!function(t,i,o,n,r,a){var d=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},h=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(d)})):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(o,t.left,t.top,n,a,d)})}}},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=i(0),n=i(1);t.exports=function(t,e){var i=e&&e.window||("undefined"==typeof window?void 0:window);return t="string"==typeof t?i.document.querySelector(t):t,void 0===(i&&i.HTMLElement)||t instanceof i.HTMLElement||e?e||(e={}):e=t,{layout:n.bind(this,t,e),getLayout:o.bind(this,e)}}}])});
+ * */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)}}}])});
 //# sourceMappingURL=opentok-layout.min.js.map

package.json

 {
   "name": "opentok-layout-js",
-  "version": "3.4.0",
+  "version": "3.5.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

@@ -41,2 +41,6 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
     smallAlignItems: 'center', // How to align the small row or column of items if there is a big one
+    smallMaxWidth: Infinity,   // The maximum width of the small elements 
+    smallMaxHeight: Infinity,  // The maximum height of the small elements
+    bigMaxWidth: Infinity,     // The maximum width of the big elements
+    bigMaxHeight: Infinity,    // The maximum height of the big elements
     bigMaxRatio: 3/2,          // The narrowest ratio to use for the big elements (default 2x3)
@@ -43,0 +47,0 @@ bigMinRatio: 9/16,         // The widest ratio to use for the big elements (default 16x9)

src/getLayout.js

@@ -1,2 +0,2 @@
-const getBestDimensions = (minRatio, maxRatio, Width, Height, count) => {
+const getBestDimensions = (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) => {
   let maxArea;
@@ -32,6 +32,9 @@ let targetCols;
 
+    tWidth = Math.min(maxWidth, tWidth);
+    tHeight = Math.min(maxHeight, tHeight);
+
     const area = (tWidth * tHeight) * count;
 
     // If this width and height takes up the most space then we're going with that
-    if (maxArea === undefined || (area > maxArea)) {
+    if (maxArea === undefined || (area >= maxArea)) {
       maxArea = area;
@@ -64,2 +67,4 @@ targetHeight = tHeight;
     alignItems = 'center',
+    maxWidth = Infinity,
+    maxHeight = Infinity,
   } = opts;
@@ -73,7 +78,9 @@ const ratios = elements.map(element => element.height / element.width);
   if (!fixedRatio) {
-    dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count);
+    dimensions = getBestDimensions(minRatio, maxRatio, containerWidth, containerHeight, count,
+      maxWidth, maxHeight);
   } else {
     // Use the ratio of the first video element we find to approximate
     const ratio = ratios.length > 0 ? ratios[0] : null;
-    dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count);
+    dimensions = getBestDimensions(ratio, ratio, containerWidth, containerHeight, count,
+      maxWidth, maxHeight);
   }
@@ -120,3 +127,3 @@
       row.width = containerWidth;
-    } else if (row.width < containerWidth) {
+    } else if (row.width < containerWidth && row.height < maxHeight) {
       remainingShortRows += 1;
@@ -221,2 +228,6 @@ }
     smallAlignItems = 'center',
+    smallMaxWidth = Infinity,
+    smallMaxHeight = Infinity,
+    bigMaxWidth = Infinity,
+    bigMaxHeight = Infinity,
   } = opts;
@@ -269,2 +280,4 @@
         alignItems: bigAlignItems,
+        maxWidth: bigMaxWidth,
+        maxHeight: bigMaxHeight,
       }, bigOnes);
@@ -280,2 +293,4 @@ smallBoxes = getLayout({
         alignItems: smallAlignItems,
+        maxWidth: smallMaxWidth,
+        maxHeight: smallMaxHeight,
       }, smallOnes);
@@ -292,2 +307,4 @@ } else {
         alignItems: smallAlignItems,
+        maxWidth: smallMaxWidth,
+        maxHeight: smallMaxHeight,
       }, smallOnes);
@@ -302,2 +319,4 @@ bigBoxes = getLayout({
         alignItems: bigAlignItems,
+        maxWidth: bigMaxWidth,
+        maxHeight: bigMaxHeight,
       }, bigOnes);
@@ -314,2 +333,4 @@ }
       alignItems: bigAlignItems,
+      maxWidth: bigMaxWidth,
+      maxHeight: bigMaxHeight,
     }, bigOnes);
@@ -326,2 +347,4 @@ } else {
       alignItems,
+      maxWidth: smallMaxWidth,
+      maxHeight: smallMaxHeight,
     }, smallOnes);
@@ -328,0 +351,0 @@ }

tests/unit/opentok-layout-spec.js

@@ -150,5 +150,4 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
             alignItems,
-            bigFixedRatio: true,
-            minRatio: 3 / 4,
-            maxRatio: 3 / 4,
+            minRatio: 10 / 16,
+            maxRatio: 10 / 16,
           });
@@ -162,7 +161,7 @@ layoutContainer.layout();
             case 'end':
-              expect(boundingRect.left).toEqual(200);
+              expect(boundingRect.left).toEqual(160);
               break;
             case 'center':
             default:
-              expect(boundingRect.left).toEqual(100);
+              expect(boundingRect.left).toEqual(80);
               break;
@@ -174,2 +173,22 @@ }
 
+    describe('smallMaxWidth and smallMaxHeight', () => {
+      it('does not go over the smallMaxWidth and smallMaxHeight and stays centered', () => {
+        const layoutContainer = initLayoutContainer(layoutDiv, {
+          smallMaxWidth: 160,
+          smallMaxHeight: 100,
+        });
+        layoutContainer.layout();
+        const div1Rect = div1.getBoundingClientRect();
+        expect(div1Rect.width).toEqual(160);
+        expect(div1Rect.height).toEqual(100);
+        expect(div1Rect.left).toEqual(40);
+        expect(div1Rect.top).toEqual(100);
+        const div2Rect = div2.getBoundingClientRect();
+        expect(div2Rect.width).toEqual(160);
+        expect(div2Rect.height).toEqual(100);
+        expect(div2Rect.left).toEqual(200);
+        expect(div2Rect.top).toEqual(100);
+      });
+    });
+
     describe('ignoreClass', () => {
@@ -346,2 +365,22 @@ it('does not position items that are ignored', () => {
       });
+
+      describe('bigMaxWidth and bigMaxHeight', () => {
+        it('does not go over the bigMaxWidth and bigMaxHeight and stays centered', () => {
+          const layoutContainer = initLayoutContainer(layoutDiv, {
+            bigMaxWidth: 200,
+            bigMaxHeight: 220,
+          });
+          layoutContainer.layout();
+          const div1Rect = div1.getBoundingClientRect();
+          expect(div1Rect.width).toEqual(200);
+          expect(div1Rect.height).toEqual(220);
+          expect(div1Rect.left).toEqual(60);
+          expect(div1Rect.top).toEqual(40);
+          const div2Rect = div2.getBoundingClientRect();
+          expect(div2Rect.width).toEqual(80);
+          expect(div2Rect.height).toEqual(120);
+          expect(div2Rect.left).toEqual(320);
+          expect(div2Rect.top).toEqual(90);
+        });
+      });
     });
@@ -348,0 +387,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

153724

increased by4.06%

Lines of code

2048

increased by4.44%

Number of lines in readme file

247

increased by1.65%

No dependency changes