opentok-layout-js - npm Package Compare versions

Comparing version 3.8.0 to 3.9.0

opentok-layout.js

@@ -174,3 +174,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
       _opts$maxHeight = opts.maxHeight,
-      maxHeight = _opts$maxHeight === undefined ? Infinity : _opts$maxHeight;
+      maxHeight = _opts$maxHeight === undefined ? Infinity : _opts$maxHeight,
+      _opts$scaleLastRow = opts.scaleLastRow,
+      scaleLastRow = _opts$scaleLastRow === undefined ? true : _opts$scaleLastRow;
 
@@ -236,3 +238,3 @@ var ratios = elements.map(function (element) {
   }
-  if (totalRowHeight < containerHeight && remainingShortRows > 0) {
+  if (scaleLastRow && totalRowHeight < containerHeight && remainingShortRows > 0) {
     // We can grow some of the rows, we're not taking up the whole height
@@ -356,3 +358,7 @@ var remainingHeightDiff = containerHeight - totalRowHeight;
       _opts$bigMaxHeight = opts.bigMaxHeight,
-      bigMaxHeight = _opts$bigMaxHeight === undefined ? Infinity : _opts$bigMaxHeight;
+      bigMaxHeight = _opts$bigMaxHeight === undefined ? Infinity : _opts$bigMaxHeight,
+      _opts$scaleLastRow2 = opts.scaleLastRow,
+      scaleLastRow = _opts$scaleLastRow2 === undefined ? true : _opts$scaleLastRow2,
+      _opts$bigScaleLastRow = opts.bigScaleLastRow,
+      bigScaleLastRow = _opts$bigScaleLastRow === undefined ? true : _opts$bigScaleLastRow;
 
@@ -419,3 +425,4 @@
         maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight
+        maxHeight: bigMaxHeight,
+        scaleLastRow: bigScaleLastRow
       }, bigOnes);
@@ -432,3 +439,4 @@ smallBoxes = getLayout({
         maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight
+        maxHeight: smallMaxHeight,
+        scaleLastRow: scaleLastRow
       }, smallOnes);
@@ -446,3 +454,4 @@ } else {
         maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight
+        maxHeight: smallMaxHeight,
+        scaleLastRow: scaleLastRow
       }, smallOnes);
@@ -458,3 +467,4 @@ bigBoxes = getLayout({
         maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight
+        maxHeight: bigMaxHeight,
+        scaleLastRow: bigScaleLastRow
       }, bigOnes);
@@ -472,3 +482,4 @@ }
       maxWidth: bigMaxWidth,
-      maxHeight: bigMaxHeight
+      maxHeight: bigMaxHeight,
+      scaleLastRow: bigScaleLastRow
     }, bigOnes);
@@ -486,3 +497,4 @@ } else {
       maxWidth: maxWidth,
-      maxHeight: maxHeight
+      maxHeight: maxHeight,
+      scaleLastRow: scaleLastRow
     }, smallOnes);
@@ -561,3 +573,3 @@ }
 
-  var positionElement = function positionElement(elem, x, y, w, h, animate) {
+  var positionElement = function positionElement(elem, x, y, w, h, animate, onLayout) {
     var _this = this;
@@ -590,2 +602,10 @@
         if (animate.complete) animate.complete.call(_this);
+        if (onLayout) {
+          onLayout(elem, {
+            left: x,
+            top: y,
+            width: w,
+            height: h
+          });
+        }
       });
@@ -597,2 +617,10 @@ } else {
       }
+      if (onLayout) {
+        onLayout(elem, {
+          left: x,
+          top: y,
+          width: w,
+          height: h
+        });
+      }
     }
@@ -679,3 +707,3 @@ fixAspectRatio();
 
-    positionElement(elem, box.left, box.top, actualWidth, actualHeight, animate);
+    positionElement(elem, box.left, box.top, actualWidth, actualHeight, animate, opts.onLayout);
   });
@@ -682,0 +710,0 @@ };

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,f=void 0,h=void 0,u=void 0,g=void 0,l=void 0,s=void 0,c=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(c=(s=Math.floor(o/p))/(l=Math.floor(e/m)))>i?s=l*(c=i):c<t&&(l=s/(c=t));var x=(l=Math.min(r,l))*(s=Math.min(a,s))*n;(void 0===d||x>=d)&&(d=x,u=s,g=l,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,l=t.alignItems,s=void 0===l?"center":l,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 H=0,R=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(s){case"start":R=0;break;case"end":R=d-j;break;case"center":default:R=(d-j)/2}for(var E=0;E<W.length;E+=1){M=W[E];var q=void 0;switch(s){case"start":q=0;break;case"end":q=a-M.width;break;case"center":default:q=(a-M.width)/2}H=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:H+h,top:R+g,width:$,height:B}),H+=$}R+=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,l=void 0!==g&&g,s=t.bigMaxRatio,c=void 0===s?1.5:s,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,H=void 0===w?480:w,R=t.alignItems,W=void 0===R?"center":R,M=t.bigAlignItems,L=void 0===M?"center":M,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=H/y,$=0,V=0,z=0,D=0,G=[],J=i.filter(function(t,i){return!!t.big&&(G.push(i),!0)}),K=i.filter(function(t){return!t.big}),Q=[],U=[];if(J.length>0&&K.length>0){var X=void 0,Y=void 0,Z=!0===x;F>function(t){return t.height/t.width}(J[0])?(X=y,z=H-(V=Y=Math.floor(H*u)),"column"===x?Z=!1:"row"===x&&(Z=!0)):(Y=H,D=y-($=X=Math.floor(y*u)),"column"===x?Z=!0:"row"===x&&(Z=!1)),Z?(Q=n({containerWidth:X,containerHeight:Y,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:m,maxRatio:c,alignItems:L,maxWidth:q,maxHeight:N},J),U=n({containerWidth:y-$,containerHeight:H-V,offsetLeft:$,offsetTop:V,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k},K)):(U=n({containerWidth:y-$,containerHeight:H-V,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k},K),Q=n({containerWidth:X,containerHeight:Y,offsetLeft:D,offsetTop:z,fixedRatio:l,minRatio:m,alignItems:L,maxWidth:q,maxHeight:N},J))}else J.length>0&&0===K.length?Q=n({containerWidth:y,containerHeight:H,fixedRatio:l,minRatio:m,maxRatio:c,alignItems:L,maxWidth:q,maxHeight:N},J):U=n({containerWidth:y-$,containerHeight:H-V,offsetLeft:$,offsetTop:V,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_},K);var tt=[],it=0,et=0;return i.forEach(function(t,i){G.indexOf(i)>-1?(tt[i]=Q[it],it+=1):(tt[i]=U[et],et+=1)}),tt}},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 l=t.getAttribute("id");l||(l="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",l)),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 s=Array.prototype.filter.call(t.querySelectorAll("#"+l+">*:not(."+g+")"),function(t){return"none"!==e(t,"display")}),c=s.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(h),i});n(i,c).forEach(function(t,i){var o=s[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&&"undefined"!=typeof $?($(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";
+!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";
 /*!
@@ -3,0 +3,0 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)

package.json

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

@@ -35,2 +35,3 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
     fixedRatio: false,         // If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (default false)
+    scaleLastRow: true,        // If there are less elements on the last row then we can scale them up to take up more space
     alignItems: 'center',      // Can be 'start', 'center' or 'end'. Determines where to place items when on a row or column that is not full
@@ -40,2 +41,3 @@ bigClass: "OT_big",        // The class to add to elements that should be sized bigger
     bigFixedRatio: false,      // fixedRatio for the big ones
+    bigScaleLastRow: true,     // scale last row for the big elements
     bigAlignItems: 'center',   // How to align the big items
@@ -56,2 +58,3 @@ smallAlignItems: 'center', // How to align the small row or column of items if there is a big one
     ignoreClass: 'OT_ignore',  // Elements with this class will be ignored and not positioned. This lets you do things like picture-in-picture
+    onLayout: null,            // A function that gets called every time an element is moved or resized, (element, { left, top, width, height }) => {} 
 };
@@ -58,0 +61,0 @@ const layout = initLayoutContainer(document.getElementById("layout"), options);

src/getLayout.js

@@ -68,2 +68,3 @@ const getBestDimensions = (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) => {
     maxHeight = Infinity,
+    scaleLastRow = true,
   } = opts;
@@ -130,3 +131,3 @@ const ratios = elements.map(element => element.height / element.width);
   }
-  if (totalRowHeight < containerHeight && remainingShortRows > 0) {
+  if (scaleLastRow && totalRowHeight < containerHeight && remainingShortRows > 0) {
     // We can grow some of the rows, we're not taking up the whole height
@@ -232,2 +233,4 @@ let remainingHeightDiff = containerHeight - totalRowHeight;
     bigMaxHeight = Infinity,
+    scaleLastRow = true,
+    bigScaleLastRow = true,
   } = opts;
@@ -293,2 +296,3 @@
         maxHeight: bigMaxHeight,
+        scaleLastRow: bigScaleLastRow,
       }, bigOnes);
@@ -306,2 +310,3 @@ smallBoxes = getLayout({
         maxHeight: smallMaxHeight,
+        scaleLastRow,
       }, smallOnes);
@@ -320,2 +325,3 @@ } else {
         maxHeight: smallMaxHeight,
+        scaleLastRow,
       }, smallOnes);
@@ -332,2 +338,3 @@ bigBoxes = getLayout({
         maxHeight: bigMaxHeight,
+        scaleLastRow: bigScaleLastRow,
       }, bigOnes);
@@ -346,2 +353,3 @@ }
       maxHeight: bigMaxHeight,
+      scaleLastRow: bigScaleLastRow,
     }, bigOnes);
@@ -360,2 +368,3 @@ } else {
       maxHeight,
+      scaleLastRow,
     }, smallOnes);
@@ -362,0 +371,0 @@ }

src/layout.js

@@ -44,3 +44,3 @@ const getLayout = require('./getLayout');
 
-  const positionElement = function positionElement(elem, x, y, w, h, animate) {
+  const positionElement = function positionElement(elem, x, y, w, h, animate, onLayout) {
     const targetPosition = {
@@ -72,2 +72,10 @@ left: `${x}px`,
           if (animate.complete) animate.complete.call(this);
+          if (onLayout) {
+            onLayout(elem, {
+              left: x,
+              top: y,
+              width: w,
+              height: h,
+            });
+          }
         });
@@ -79,2 +87,10 @@ } else {
       }
+      if (onLayout) {
+        onLayout(elem, {
+          left: x,
+          top: y,
+          width: w,
+          height: h,
+        });
+      }
     }
@@ -163,18 +179,18 @@ fixAspectRatio();
     const actualWidth = box.width - getCSSNumber(elem, 'paddingLeft')
-        - getCSSNumber(elem, 'paddingRight')
-        - getCSSNumber(elem, 'marginLeft')
-        - getCSSNumber(elem, 'marginRight')
-        - getCSSNumber(elem, 'borderLeft')
-        - getCSSNumber(elem, 'borderRight');
+      - 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');
+      - getCSSNumber(elem, 'paddingBottom')
+      - getCSSNumber(elem, 'marginTop')
+      - getCSSNumber(elem, 'marginBottom')
+      - getCSSNumber(elem, 'borderTop')
+      - getCSSNumber(elem, 'borderBottom');
 
     positionElement(elem, box.left, box.top, actualWidth, actualHeight,
-      animate);
+      animate, opts.onLayout);
   });
 };

tests/unit/opentok-layout-spec.js

@@ -76,2 +76,15 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
 
+    it('triggers the onLayout method', () => {
+      const layoutContainer = initLayoutContainer(layoutDiv, {
+        onLayout: (elem, position) => {
+          ['width', 'height', 'top', 'left'].forEach((key) => {
+            expect(
+              position[key] === expectedLayout[0][key] || position[key] === expectedLayout[1][key]
+            ).toBe(true);
+          });
+        },
+      });
+      layoutContainer.layout();
+    });
+
     it('handles default layout', () => {
@@ -474,2 +487,18 @@ const layoutContainer = initLayoutContainer(layoutDiv);
 
+    it('does not grows to take up the whole height if you pass scaleLastRow=false', () => {
+      divs[1].videoWidth = 480;
+      divs[1].videoHeight = 640;
+      divs[2].videoWidth = 1280;
+      divs[2].videoHeight = 720;
+      layoutDiv.style.width = '400px';
+      layoutDiv.style.height = '600px';
+      const layoutContainer = initLayoutContainer(layoutDiv, {
+        fixedRatio: true,
+        scaleLastRow: false,
+      });
+      layoutContainer.layout();
+      const rect = divs[4].getBoundingClientRect();
+      expect(rect.top + rect.height).toBeCloseTo(514, 1);
+    });
+
     it('does not mess up the aspect ratio of the last row when it grows', () => {
@@ -476,0 +505,0 @@ layoutDiv.style.width = '600px';

types/opentok-layout-js.d.ts

@@ -5,23 +5,26 @@ declare module 'opentok-layout-js' {
   export type Options = {
-    alignItems: alignOptions;
-    animate: boolean;
-    bigAlignItems: alignOptions;
-    bigClass: string;
-    bigFirst: boolean;
-    bigFixedRatio: false;
-    bigMaxHeight: number;
-    bigMaxRatio: number;
-    bigMaxWidth: number;
-    bigMinRatio: number;
-    bigPercentage: number;
-    fixedRatio: boolean;
-    ignoreClass: string;
-    maxHeight: number;
-    maxRatio: number;
-    maxWidth: number;
-    minRatio: number;
-    smallAlignItems: alignOptions;
-    smallMaxHeight: number;
-    smallMaxWidth: number;
-    window: Window;
+    alignItems?: alignOptions;
+    animate?: boolean;
+    bigAlignItems?: alignOptions;
+    bigClass?: string;
+    bigFirst?: boolean;
+    bigFixedRatio?: false;
+    bigMaxHeight?: number;
+    bigMaxRatio?: number;
+    bigMaxWidth?: number;
+    bigMinRatio?: number;
+    bigPercentage?: number;
+    fixedRatio?: boolean;
+    ignoreClass?: string;
+    maxHeight?: number;
+    maxRatio?: number;
+    maxWidth?: number;
+    minRatio?: number;
+    smallAlignItems?: alignOptions;
+    smallMaxHeight?: number;
+    smallMaxWidth?: number;
+    scaleLastRow?: boolean;
+    bigScaleLastRow?: boolean;
+    onLayout?: Function,
+    window?: Window;
   };
@@ -28,0 +31,0 @@

types/test.ts

@@ -30,2 +30,4 @@ /// <reference path="opentok-layout-js.d.ts" />
   ignoreClass: 'OT_ignore',
+  scaleLastRow: true,
+  bigScaleLastRow: true,
 };
@@ -32,0 +34,0 @@

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

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

Total package byte prevSize

140588

increased by3.3%

Lines of code

2292

increased by3.95%

Number of lines in readme file

253

increased by1.2%

No dependency changes