opentok-layout-js - npm Package Compare versions

Comparing version 4.4.0 to 5.0.0

bower.json

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

opentok-layout.js

@@ -383,2 +383,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var smallBoxes = [];
+  var areas = {};
   if (bigOnes.length > 0 && smallOnes.length > 0) {
@@ -447,60 +448,51 @@ var bigWidth = void 0;
     if (showBigFirst) {
-      bigBoxes = getLayout({
-        containerWidth: bigWidth,
-        containerHeight: bigHeight,
-        offsetLeft: 0,
-        offsetTop: 0,
-        fixedRatio: bigFixedRatio,
-        minRatio: bigMinRatio,
-        maxRatio: bigMaxRatio,
-        alignItems: bigAlignItems,
-        maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight,
-        scaleLastRow: bigScaleLastRow
-      }, bigOnes);
-      smallBoxes = getLayout({
-        containerWidth: containerWidth - offsetLeft,
-        containerHeight: containerHeight - offsetTop,
-        offsetLeft: offsetLeft,
-        offsetTop: offsetTop,
-        fixedRatio: fixedRatio,
-        minRatio: minRatio,
-        maxRatio: maxRatio,
-        alignItems: smallAlignItems,
-        maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight,
-        scaleLastRow: scaleLastRow
-      }, smallOnes);
+      areas.big = {
+        top: 0,
+        left: 0,
+        width: bigWidth,
+        height: bigHeight
+      };
+      areas.small = {
+        top: offsetTop,
+        left: offsetLeft,
+        width: containerWidth - offsetLeft,
+        height: containerHeight - offsetTop
+      };
     } else {
-      smallBoxes = getLayout({
-        containerWidth: containerWidth - offsetLeft,
-        containerHeight: containerHeight - offsetTop,
-        offsetLeft: 0,
-        offsetTop: 0,
-        fixedRatio: fixedRatio,
-        minRatio: minRatio,
-        maxRatio: maxRatio,
-        alignItems: smallAlignItems,
-        maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight,
-        scaleLastRow: scaleLastRow
-      }, smallOnes);
-      bigBoxes = getLayout({
-        containerWidth: bigWidth,
-        containerHeight: bigHeight,
-        offsetLeft: bigOffsetLeft,
-        offsetTop: bigOffsetTop,
-        fixedRatio: bigFixedRatio,
-        minRatio: bigMinRatio,
-        alignItems: bigAlignItems,
-        maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight,
-        scaleLastRow: bigScaleLastRow
-      }, bigOnes);
+      areas.big = {
+        left: bigOffsetLeft,
+        top: bigOffsetTop,
+        width: bigWidth,
+        height: bigHeight
+      };
+      areas.small = {
+        top: 0,
+        left: 0,
+        width: containerWidth - offsetLeft,
+        height: containerHeight - offsetTop
+      };
     }
   } else if (bigOnes.length > 0 && smallOnes.length === 0) {
     // We only have one bigOne just center it
+    areas.big = {
+      top: 0,
+      left: 0,
+      width: containerWidth,
+      height: containerHeight
+    };
+  } else {
+    areas.small = {
+      top: offsetTop,
+      left: offsetLeft,
+      width: containerWidth - offsetLeft,
+      height: containerHeight - offsetTop
+    };
+  }
+
+  if (areas.big) {
     bigBoxes = getLayout({
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
+      containerWidth: areas.big.width,
+      containerHeight: areas.big.height,
+      offsetLeft: areas.big.left,
+      offsetTop: areas.big.top,
       fixedRatio: bigFixedRatio,
@@ -514,14 +506,15 @@ minRatio: bigMinRatio,
     }, bigOnes);
-  } else {
+  }
+  if (areas.small) {
     smallBoxes = getLayout({
-      containerWidth: containerWidth - offsetLeft,
-      containerHeight: containerHeight - offsetTop,
-      offsetLeft: offsetLeft,
-      offsetTop: offsetTop,
+      containerWidth: areas.small.width,
+      containerHeight: areas.small.height,
+      offsetLeft: areas.small.left,
+      offsetTop: areas.small.top,
       fixedRatio: fixedRatio,
       minRatio: minRatio,
       maxRatio: maxRatio,
-      alignItems: alignItems,
-      maxWidth: maxWidth,
-      maxHeight: maxHeight,
+      alignItems: areas.big ? smallAlignItems : alignItems,
+      maxWidth: areas.big ? smallMaxWidth : maxWidth,
+      maxHeight: areas.big ? smallMaxHeight : maxHeight,
       scaleLastRow: scaleLastRow
@@ -544,3 +537,3 @@ }, smallOnes);
   });
-  return boxes;
+  return { boxes: boxes, areas: areas };
 };
@@ -766,4 +759,4 @@
 
-  var boxes = getLayout(opts, elements);
-  boxes.forEach(function (box, idx) {
+  var layout = getLayout(opts, elements);
+  layout.boxes.forEach(function (box, idx) {
     var elem = children[idx];
@@ -770,0 +763,0 @@ css(elem, 'position', 'absolute');

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 r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,i),r.l=!0,r.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 r in t)i.d(o,r,function(e){return t[e]}.bind(null,r));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";var o=function(t,e,i,o,r,n,a){for(var d=void 0,h=void 0,f=void 0,g=void 0,l=void 0,s=void 0,c=void 0,u=void 0,v=1;v<=r;v+=1){var m=v,p=Math.ceil(r/m);(u=(c=Math.floor(o/p))/(s=Math.floor(i/m)))>e?c=s*(u=e):u<t&&(s=c/(u=t));var x=(s=Math.min(n,s))*(c=Math.min(a,c))*r;(void 0===d||x>=d)&&(d=x,g=c,l=s,h=m,f=p)}return{maxArea:d,targetCols:h,targetRows:f,targetHeight:g,targetWidth:l,ratio:g/l}},r=function(t,e){var i=t.maxRatio,r=t.minRatio,n=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,h=t.offsetLeft,f=void 0===h?0:h,g=t.offsetTop,l=void 0===g?0:g,s=t.alignItems,c=void 0===s?"center":s,u=t.maxWidth,v=void 0===u?1/0:u,m=t.maxHeight,p=void 0===m?1/0:m,x=t.scaleLastRow,b=void 0===x||x,w=e.map((function(t){return t.height/t.width})),y=w.length,R=void 0;if(n){var H=w.length>0?w[0]:null;R=o(H,H,a,d,y,v,p)}else R=o(r,i,a,d,y,v,p);for(var W=0,M=0,L=[],S=void 0,T=[],I=0;I<w.length;I+=1){I%R.targetCols==0&&(S={ratios:[],width:0,height:0},L.push(S));var O=w[I];S.ratios.push(O);var j=R.targetWidth,_=R.targetHeight;n&&(j=_/O),S.width+=j,S.height=_}for(var C=0,P=0,A=0;A<L.length;A+=1)(S=L[A]).width>a?(S.height=Math.floor(S.height*(a/S.width)),S.width=a):S.width<a&&S.height<p&&(P+=1),C+=S.height;if(b&&C<d&&P>0){var k=d-C;C=0;for(var E=0;E<L.length;E+=1){if((S=L[E]).width<a){var q=k/P;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,P-=1}C+=S.height}}switch(c){case"start":M=0;break;case"end":M=d-C;break;case"center":default:M=(d-C)/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,z=0;z<S.ratios.length;z+=1){var B=S.ratios[z],V=R.targetWidth;$=S.height,n?V=Math.floor($/B):$/V!=R.targetHeight/R.targetWidth&&(V=Math.floor(R.targetWidth/R.targetHeight*$)),T.push({left:W+f,top:M+l,width:V,height:$}),W+=V}M+=$}return T};t.exports=function(t,e){var i,n=t.maxRatio,a=void 0===n?1.5:n,d=t.minRatio,h=void 0===d?9/16:d,f=t.fixedRatio,g=void 0!==f&&f,l=t.bigPercentage,s=void 0===l?.8:l,c=t.minBigPercentage,u=void 0===c?0:c,v=t.bigFixedRatio,m=void 0!==v&&v,p=t.bigMaxRatio,x=void 0===p?1.5:p,b=t.bigMinRatio,w=void 0===b?9/16:b,y=t.bigFirst,R=void 0===y||y,H=t.containerWidth,W=void 0===H?640:H,M=t.containerHeight,L=void 0===M?480:M,S=t.alignItems,T=void 0===S?"center":S,I=t.bigAlignItems,O=void 0===I?"center":I,j=t.smallAlignItems,_=void 0===j?"center":j,C=t.maxWidth,P=void 0===C?1/0:C,A=t.maxHeight,k=void 0===A?1/0:A,E=t.smallMaxWidth,q=void 0===E?1/0:E,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/W,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=[],rt=[];if(et.length>0&&it.length>0){var nt=void 0,at=void 0,dt=!0===R;if(Q>(i=et[0]).height/i.width){if(nt=W,at=Math.floor(L*s),u>0){var ht=void 0;if(m){var ft=et[0].height/et[0].width;ht=o(ft,ft,nt,at,et.length,z,V)}else ht=o(w,x,nt,at,et.length,z,V);at=Math.max(L*u,Math.min(at,ht.targetHeight*ht.targetRows));var gt=o(h,a,W,L-at,it.length,q,F);at=Math.max(at,L-gt.targetRows*gt.targetHeight)}Y=L-(X=at),"column"===R?dt=!1:"row"===R&&(dt=!0)}else{if(at=L,nt=Math.floor(W*s),u>0){var lt=void 0;if(m){var st=et[0].height/et[0].width;lt=o(st,st,nt,at,et.length,z,V)}else lt=o(w,x,nt,at,et.length,z,V);nt=Math.max(W*u,Math.min(nt,lt.targetWidth*lt.targetCols));var ct=o(h,a,W-nt,L,it.length,q,F);nt=Math.max(nt,W-ct.targetCols*ct.targetWidth)}Z=W-(U=nt),"column"===R?dt=!0:"row"===R&&(dt=!1)}dt?(ot=r({containerWidth:nt,containerHeight:at,offsetLeft:0,offsetTop:0,fixedRatio:m,minRatio:w,maxRatio:x,alignItems:O,maxWidth:z,maxHeight:V,scaleLastRow:K},et),rt=r({containerWidth:W-U,containerHeight:L-X,offsetLeft:U,offsetTop:X,fixedRatio:g,minRatio:h,maxRatio:a,alignItems:_,maxWidth:q,maxHeight:F,scaleLastRow:G},it)):(rt=r({containerWidth:W-U,containerHeight:L-X,offsetLeft:0,offsetTop:0,fixedRatio:g,minRatio:h,maxRatio:a,alignItems:_,maxWidth:q,maxHeight:F,scaleLastRow:G},it),ot=r({containerWidth:nt,containerHeight:at,offsetLeft:Z,offsetTop:Y,fixedRatio:m,minRatio:w,alignItems:O,maxWidth:z,maxHeight:V,scaleLastRow:K},et))}else et.length>0&&0===it.length?ot=r({containerWidth:W,containerHeight:L,fixedRatio:m,minRatio:w,maxRatio:x,alignItems:O,maxWidth:z,maxHeight:V,scaleLastRow:K},et):rt=r({containerWidth:W-U,containerHeight:L-X,offsetLeft:U,offsetTop:X,fixedRatio:g,minRatio:h,maxRatio:a,alignItems:T,maxWidth:P,maxHeight:k,scaleLastRow:G},it);var ut=[],vt=0,mt=0;return e.forEach((function(t,e){tt.indexOf(e)>-1?(ut[e]=ot[vt],vt+=1):(ut[e]=rt[mt],mt+=1)})),ut}},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 r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,i),r.l=!0,r.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 r in t)i.d(o,r,function(e){return t[e]}.bind(null,r));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";var o=function(t,e,i,o,r,n,a){for(var h=void 0,d=void 0,f=void 0,l=void 0,g=void 0,s=void 0,u=void 0,c=void 0,v=1;v<=r;v+=1){var p=v,m=Math.ceil(r/p);(c=(u=Math.floor(o/m))/(s=Math.floor(i/p)))>e?u=s*(c=e):c<t&&(s=u/(c=t));var b=(s=Math.min(n,s))*(u=Math.min(a,u))*r;(void 0===h||b>=h)&&(h=b,l=u,g=s,d=p,f=m)}return{maxArea:h,targetCols:d,targetRows:f,targetHeight:l,targetWidth:g,ratio:l/g}},r=function(t,e){var i=t.maxRatio,r=t.minRatio,n=t.fixedRatio,a=t.containerWidth,h=t.containerHeight,d=t.offsetLeft,f=void 0===d?0:d,l=t.offsetTop,g=void 0===l?0:l,s=t.alignItems,u=void 0===s?"center":s,c=t.maxWidth,v=void 0===c?1/0:c,p=t.maxHeight,m=void 0===p?1/0:p,b=t.scaleLastRow,w=void 0===b||b,y=e.map((function(t){return t.height/t.width})),x=y.length,M=void 0;if(n){var H=y.length>0?y[0]:null;M=o(H,H,a,h,x,v,m)}else M=o(r,i,a,h,x,v,m);for(var W=0,R=0,L=[],S=void 0,O=[],j=0;j<y.length;j+=1){j%M.targetCols==0&&(S={ratios:[],width:0,height:0},L.push(S));var T=y[j];S.ratios.push(T);var _=M.targetWidth,C=M.targetHeight;n&&(_=C/T),S.width+=_,S.height=C}for(var I=0,P=0,A=0;A<L.length;A+=1)(S=L[A]).width>a?(S.height=Math.floor(S.height*(a/S.width)),S.width=a):S.width<a&&S.height<m&&(P+=1),I+=S.height;if(w&&I<h&&P>0){var k=h-I;I=0;for(var E=0;E<L.length;E+=1){if((S=L[E]).width<a){var q=k/P;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,P-=1}I+=S.height}}switch(u){case"start":R=0;break;case"end":R=h-I;break;case"center":default:R=(h-I)/2}for(var N=0;N<L.length;N+=1){S=L[N];var F=void 0;switch(u){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,z=0;z<S.ratios.length;z+=1){var B=S.ratios[z],V=M.targetWidth;$=S.height,n?V=Math.floor($/B):$/V!=M.targetHeight/M.targetWidth&&(V=Math.floor(M.targetWidth/M.targetHeight*$)),O.push({left:W+f,top:R+g,width:V,height:$}),W+=V}R+=$}return O};t.exports=function(t,e){var i,n=t.maxRatio,a=void 0===n?1.5:n,h=t.minRatio,d=void 0===h?9/16:h,f=t.fixedRatio,l=void 0!==f&&f,g=t.bigPercentage,s=void 0===g?.8:g,u=t.minBigPercentage,c=void 0===u?0:u,v=t.bigFixedRatio,p=void 0!==v&&v,m=t.bigMaxRatio,b=void 0===m?1.5:m,w=t.bigMinRatio,y=void 0===w?9/16:w,x=t.bigFirst,M=void 0===x||x,H=t.containerWidth,W=void 0===H?640:H,R=t.containerHeight,L=void 0===R?480:R,S=t.alignItems,O=void 0===S?"center":S,j=t.bigAlignItems,T=void 0===j?"center":j,_=t.smallAlignItems,C=void 0===_?"center":_,I=t.maxWidth,P=void 0===I?1/0:I,A=t.maxHeight,k=void 0===A?1/0:A,E=t.smallMaxWidth,q=void 0===E?1/0:E,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/W,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=[],rt=[],nt={};if(et.length>0&&it.length>0){var at=void 0,ht=void 0,dt=!0===M;if(Q>(i=et[0]).height/i.width){if(at=W,ht=Math.floor(L*s),c>0){var ft=void 0;if(p){var lt=et[0].height/et[0].width;ft=o(lt,lt,at,ht,et.length,z,V)}else ft=o(y,b,at,ht,et.length,z,V);ht=Math.max(L*c,Math.min(ht,ft.targetHeight*ft.targetRows));var gt=o(d,a,W,L-ht,it.length,q,F);ht=Math.max(ht,L-gt.targetRows*gt.targetHeight)}Y=L-(X=ht),"column"===M?dt=!1:"row"===M&&(dt=!0)}else{if(ht=L,at=Math.floor(W*s),c>0){var st=void 0;if(p){var ut=et[0].height/et[0].width;st=o(ut,ut,at,ht,et.length,z,V)}else st=o(y,b,at,ht,et.length,z,V);at=Math.max(W*c,Math.min(at,st.targetWidth*st.targetCols));var ct=o(d,a,W-at,L,it.length,q,F);at=Math.max(at,W-ct.targetCols*ct.targetWidth)}Z=W-(U=at),"column"===M?dt=!0:"row"===M&&(dt=!1)}dt?(nt.big={top:0,left:0,width:at,height:ht},nt.small={top:X,left:U,width:W-U,height:L-X}):(nt.big={left:Z,top:Y,width:at,height:ht},nt.small={top:0,left:0,width:W-U,height:L-X})}else et.length>0&&0===it.length?nt.big={top:0,left:0,width:W,height:L}:nt.small={top:X,left:U,width:W-U,height:L-X};nt.big&&(ot=r({containerWidth:nt.big.width,containerHeight:nt.big.height,offsetLeft:nt.big.left,offsetTop:nt.big.top,fixedRatio:p,minRatio:y,maxRatio:b,alignItems:T,maxWidth:z,maxHeight:V,scaleLastRow:K},et)),nt.small&&(rt=r({containerWidth:nt.small.width,containerHeight:nt.small.height,offsetLeft:nt.small.left,offsetTop:nt.small.top,fixedRatio:l,minRatio:d,maxRatio:a,alignItems:nt.big?C:O,maxWidth:nt.big?q:P,maxHeight:nt.big?F:k,scaleLastRow:G},it));var vt=[],pt=0,mt=0;return e.forEach((function(t,e){tt.indexOf(e)>-1?(vt[e]=ot[pt],pt+=1):(vt[e]=rt[mt],mt+=1)})),{boxes:vt,areas:nt}}},function(t,e,i){"use strict";
 /*!
@@ -11,3 +11,3 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
  *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
- * */var o=i(0),r=i(2);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:r.bind(this,t,e),getLayout:o.bind(this,e)}}},function(t,e,i){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=i(0);t.exports=function(t,e){function i(t,r,n){if(n)return t.style[r]=n,NaN;if("object"===(void 0===r?"undefined":o(r)))return Object.keys(r).forEach((function(e){i(t,e,r[e])})),NaN;var a=(e&&e.window||window).getComputedStyle(t).getPropertyValue(r);return""===a&&(a=t.style[r]),a}var n=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},a=e.animate,d=void 0!==a&&a,h=e.bigClass,f=void 0===h?"OT_big":h,g=e.ignoreClass,l=void 0===g?"OT_ignore":g;if("none"!==i(t,"display")){var s,c,u=t.getAttribute("id");u||(u="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",u)),e.containerHeight=((c=(s=t).offsetHeight>0?s.offsetHeight+"px":i(s,"height"))?parseInt(c,10):0)-n(t,"border-top")-n(t,"border-bottom"),e.containerWidth=function(t){var e,o=(e=t).offsetWidth>0?e.offsetWidth+"px":i(e,"width");return o?parseInt(o,10):0}(t)-n(t,"border-left")-n(t,"border-right");var v=Array.prototype.filter.call(t.querySelectorAll("#"+u+">*:not(."+l+")"),(function(t){return"none"!==i(t,"display")})),m=v.map((function(t){var e=function(t){if(t){if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth};var e=t.querySelector("video");if(e&&e.videoHeight&&e.videoWidth)return{height:e.videoHeight,width:e.videoWidth}}return{height:480,width:640}}(t);return e.big=t.classList.contains(f),e}));r(e,m).forEach((function(t,o){var r=v[o];i(r,"position","absolute");var a=t.width-n(r,"margin-left")-n(r,"margin-right")-("border-box"!==i(r,"box-sizing")?n(r,"padding-left")+n(r,"padding-right")+n(r,"border-left")+n(r,"border-right"):0),h=t.height-n(r,"margin-top")-n(r,"margin-bottom")-("border-box"!==i(r,"box-sizing")?n(r,"padding-top")+n(r,"padding-bottom")+n(r,"border-top")+n(r,"border-bottom"):0);!function(t,e,o,r,n,a,d){var h=this,f={left:e+"px",top:o+"px",width:r+"px",height:n+"px"},g=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=r+"px",e.style.width=i||""}};a&&"undefined"!=typeof $?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",(function(){g(),a.complete&&a.complete.call(h),d&&d(t,{left:e,top:o,width:r,height:n})}))):(i(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout"),d&&d(t,{left:e,top:o,width:r,height:n})),g()}(r,t.left,t.top,a,h,d,e.onLayout)}))}}}])}));
+ * */var o=i(0),r=i(2);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:r.bind(this,t,e),getLayout:o.bind(this,e)}}},function(t,e,i){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=i(0);t.exports=function(t,e){function i(t,r,n){if(n)return t.style[r]=n,NaN;if("object"===(void 0===r?"undefined":o(r)))return Object.keys(r).forEach((function(e){i(t,e,r[e])})),NaN;var a=(e&&e.window||window).getComputedStyle(t).getPropertyValue(r);return""===a&&(a=t.style[r]),a}var n=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},a=e.animate,h=void 0!==a&&a,d=e.bigClass,f=void 0===d?"OT_big":d,l=e.ignoreClass,g=void 0===l?"OT_ignore":l;if("none"!==i(t,"display")){var s,u,c=t.getAttribute("id");c||(c="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",c)),e.containerHeight=((u=(s=t).offsetHeight>0?s.offsetHeight+"px":i(s,"height"))?parseInt(u,10):0)-n(t,"border-top")-n(t,"border-bottom"),e.containerWidth=function(t){var e,o=(e=t).offsetWidth>0?e.offsetWidth+"px":i(e,"width");return o?parseInt(o,10):0}(t)-n(t,"border-left")-n(t,"border-right");var v=Array.prototype.filter.call(t.querySelectorAll("#"+c+">*:not(."+g+")"),(function(t){return"none"!==i(t,"display")})),p=v.map((function(t){var e=function(t){if(t){if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth};var e=t.querySelector("video");if(e&&e.videoHeight&&e.videoWidth)return{height:e.videoHeight,width:e.videoWidth}}return{height:480,width:640}}(t);return e.big=t.classList.contains(f),e}));r(e,p).boxes.forEach((function(t,o){var r=v[o];i(r,"position","absolute");var a=t.width-n(r,"margin-left")-n(r,"margin-right")-("border-box"!==i(r,"box-sizing")?n(r,"padding-left")+n(r,"padding-right")+n(r,"border-left")+n(r,"border-right"):0),d=t.height-n(r,"margin-top")-n(r,"margin-bottom")-("border-box"!==i(r,"box-sizing")?n(r,"padding-top")+n(r,"padding-bottom")+n(r,"border-top")+n(r,"border-bottom"):0);!function(t,e,o,r,n,a,h){var d=this,f={left:e+"px",top:o+"px",width:r+"px",height:n+"px"},l=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=r+"px",e.style.width=i||""}};a&&"undefined"!=typeof $?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",(function(){l(),a.complete&&a.complete.call(d),h&&h(t,{left:e,top:o,width:r,height:n})}))):(i(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout"),h&&h(t,{left:e,top:o,width:r,height:n})),l()}(r,t.left,t.top,a,d,h,e.onLayout)}))}}}])}));
 //# sourceMappingURL=opentok-layout.min.js.map

package.json

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

README.md

@@ -74,3 +74,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")
 
-It will return an array of boxes which will be in the same order as the array you passed in. Each element in the array will look like:
+It will return an object `{ boxes: Box[], areas: { small: Box, big: Box } }`. This object includes an array of boxes which will be in the same order as the array you passed in. It will also contain an areas property which tells you about the dimensions of the small and big areas. Each Box in the array and in the areas will look like:
 
@@ -77,0 +77,0 @@ ```javascript

src/getLayout.js

@@ -252,2 +252,3 @@ const getBestDimensions = (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) => {
   let smallBoxes = [];
+  const areas = {};
   if (bigOnes.length > 0 && smallOnes.length > 0) {
@@ -326,60 +327,51 @@ let bigWidth;
     if (showBigFirst) {
-      bigBoxes = getLayout({
-        containerWidth: bigWidth,
-        containerHeight: bigHeight,
-        offsetLeft: 0,
-        offsetTop: 0,
-        fixedRatio: bigFixedRatio,
-        minRatio: bigMinRatio,
-        maxRatio: bigMaxRatio,
-        alignItems: bigAlignItems,
-        maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight,
-        scaleLastRow: bigScaleLastRow,
-      }, bigOnes);
-      smallBoxes = getLayout({
-        containerWidth: containerWidth - offsetLeft,
-        containerHeight: containerHeight - offsetTop,
-        offsetLeft,
-        offsetTop,
-        fixedRatio,
-        minRatio,
-        maxRatio,
-        alignItems: smallAlignItems,
-        maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight,
-        scaleLastRow,
-      }, smallOnes);
+      areas.big = {
+        top: 0,
+        left: 0,
+        width: bigWidth,
+        height: bigHeight,
+      };
+      areas.small = {
+        top: offsetTop,
+        left: offsetLeft,
+        width: containerWidth - offsetLeft,
+        height: containerHeight - offsetTop,
+      };
     } else {
-      smallBoxes = getLayout({
-        containerWidth: containerWidth - offsetLeft,
-        containerHeight: containerHeight - offsetTop,
-        offsetLeft: 0,
-        offsetTop: 0,
-        fixedRatio,
-        minRatio,
-        maxRatio,
-        alignItems: smallAlignItems,
-        maxWidth: smallMaxWidth,
-        maxHeight: smallMaxHeight,
-        scaleLastRow,
-      }, smallOnes);
-      bigBoxes = getLayout({
-        containerWidth: bigWidth,
-        containerHeight: bigHeight,
-        offsetLeft: bigOffsetLeft,
-        offsetTop: bigOffsetTop,
-        fixedRatio: bigFixedRatio,
-        minRatio: bigMinRatio,
-        alignItems: bigAlignItems,
-        maxWidth: bigMaxWidth,
-        maxHeight: bigMaxHeight,
-        scaleLastRow: bigScaleLastRow,
-      }, bigOnes);
+      areas.big = {
+        left: bigOffsetLeft,
+        top: bigOffsetTop,
+        width: bigWidth,
+        height: bigHeight,
+      };
+      areas.small = {
+        top: 0,
+        left: 0,
+        width: containerWidth - offsetLeft,
+        height: containerHeight - offsetTop,
+      };
     }
   } else if (bigOnes.length > 0 && smallOnes.length === 0) {
     // We only have one bigOne just center it
+    areas.big = {
+      top: 0,
+      left: 0,
+      width: containerWidth,
+      height: containerHeight,
+    };
+  } else {
+    areas.small = {
+      top: offsetTop,
+      left: offsetLeft,
+      width: containerWidth - offsetLeft,
+      height: containerHeight - offsetTop,
+    };
+  }
+
+  if (areas.big) {
     bigBoxes = getLayout({
-      containerWidth,
-      containerHeight,
+      containerWidth: areas.big.width,
+      containerHeight: areas.big.height,
+      offsetLeft: areas.big.left,
+      offsetTop: areas.big.top,
       fixedRatio: bigFixedRatio,
@@ -393,14 +385,15 @@ minRatio: bigMinRatio,
     }, bigOnes);
-  } else {
+  }
+  if (areas.small) {
     smallBoxes = getLayout({
-      containerWidth: containerWidth - offsetLeft,
-      containerHeight: containerHeight - offsetTop,
-      offsetLeft,
-      offsetTop,
+      containerWidth: areas.small.width,
+      containerHeight: areas.small.height,
+      offsetLeft: areas.small.left,
+      offsetTop: areas.small.top,
       fixedRatio,
       minRatio,
       maxRatio,
-      alignItems,
-      maxWidth,
-      maxHeight,
+      alignItems: areas.big ? smallAlignItems : alignItems,
+      maxWidth: areas.big ? smallMaxWidth : maxWidth,
+      maxHeight: areas.big ? smallMaxHeight : maxHeight,
       scaleLastRow,
@@ -423,3 +416,3 @@ }, smallOnes);
   });
-  return boxes;
+  return { boxes, areas };
 };

src/layout.js

@@ -171,4 +171,4 @@ const getLayout = require('./getLayout');
 
-  const boxes = getLayout(opts, elements);
-  boxes.forEach((box, idx) => {
+  const layout = getLayout(opts, elements);
+  layout.boxes.forEach((box, idx) => {
     const elem = children[idx];
@@ -175,0 +175,0 @@ css(elem, 'position', 'absolute');

tests/unit/opentok-layout-spec.js

@@ -73,3 +73,10 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
       expect(layoutContainer.getLayout(children.map(() => ({ width: 300, height: 200 }))))
-        .toEqual(expectedLayout);
+        .toEqual({
+          boxes: expectedLayout,
+          areas: {
+            small: {
+              top: 0, left: 0, width: 400, height: 300,
+            },
+          },
+        });
     });
@@ -256,3 +263,13 @@
           big: child.className === 'OT_big',
-        })))).toEqual(expectedLayout);
+        })))).toEqual({
+          boxes: expectedLayout,
+          areas: {
+            big: {
+              top: 0, left: 0, width: 320, height: 300,
+            },
+            small: {
+              top: 0, left: 320, width: 80, height: 300,
+            },
+          },
+        });
       });
@@ -881,3 +898,3 @@
         expect(bigDivRect.left).toBeCloseTo(0, 1);
-        expect(bigDivRect.top).toBeCloseTo(160, 1);
+        expect(bigDivRect.top).toBeCloseTo(180, 1);
 
@@ -884,0 +901,0 @@ layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: 'row' });

types/opentok-layout-js.d.ts

@@ -47,3 +47,3 @@ declare module 'opentok-layout-js' {
 
-  type GetLayout = (elements: Array<Element>) => Array<Box>;
+  type GetLayout = (elements: Array<Element>) => { boxes: Array<Box>, areas: { small: Box, big: Box } };
 
@@ -50,0 +50,0 @@ export type LayoutContainer = {

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

Worsened metrics

Total package byte prevSize

152307

decreased by-0.51%

No dependency changes