opentok-layout-js - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

bower.json

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

opentok-layout.js

@@ -162,3 +162,3 @@ /*!
             row;
-        // Iterate through the chilren and create an array with a new item for each row
+        // Iterate through the children and create an array with a new item for each row
         // and calculate the width of each row so that we know if we go over the size and need
@@ -189,2 +189,3 @@ // to adjust
         var totalRowHeight = 0;
+        var remainingShortRows = 0;
         for (i = 0; i < rows.length; i++) {
@@ -196,5 +197,28 @@ var row = rows[i];
             row.width = Width;
+          } else if (row.width < Width) {
+            remainingShortRows += 1;
           }
           totalRowHeight += row.height;
         }
+        if (totalRowHeight < Height && remainingShortRows > 0) {
+          // We can grow some of the rows, we're not taking up the whole height
+          var remainingHeightDiff = Height - totalRowHeight;
+          totalRowHeight = 0;
+          for (i = 0; i < rows.length; i++) {
+            var row = rows[i];
+            if (row.width < Width) {
+              // Evenly distribute the extra height between the short rows
+              var extraHeight = remainingHeightDiff / remainingShortRows;
+              if ((extraHeight / row.height) > ((Width - row.width) / row.width)) {
+                // We can't go that big or we'll go too wide
+                extraHeight = Math.floor(((Width - row.width) / row.width) * row.height);
+              }
+              row.width += Math.floor((extraHeight / row.height) * row.width);
+              row.height += extraHeight;
+              remainingHeightDiff -= extraHeight;
+              remainingShortRows -= 1;
+            }
+            totalRowHeight += row.height;
+          }
+        }
         // vertical centering
@@ -201,0 +225,0 @@ y = ((Height - (totalRowHeight)) / 2);

opentok-layout.min.js

@@ -11,2 +11,2 @@ /*!
 **/
-!function(t){var i=function(i,e,o,a,r,n){var d={left:e+"px",top:o+"px",width:a+"px",height:r+"px"},g=function(){var t=i.querySelector(".OT_root");if(t){var e=t.style.width;t.style.width=a+"px",t.style.width=e||""}};n&&t?(t(i).stop(),t(i).animate(d,n.duration||200,n.easing||"swing",function(){g(),n.complete&&n.complete.call(this)})):OT.$.css(i,d),g()},e=function(t){if(!t)return.75;var i=t.querySelector("video");return i&&i.videoHeight&&i.videoWidth?i.videoHeight/i.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},o=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},a=function(){return(1e8*Math.random()).toFixed(0)},r=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},n=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},d=function(t,a,r,n,d,g,h,l,f){var u,s=t.length,c=function(t,i){for(var e,o,n,d,g,h,l,f,u=1;s>=u;u++){var c=u,p=Math.ceil(s/c);l=Math.floor(r/p),h=Math.floor(a/c),f=l/h,f>i?(f=i,l=h*f):t>f&&(f=t,h=l/f);var v=h*l*s;(void 0===e||v>e)&&(e=v,d=l,g=h,o=c,n=p)}return{maxArea:e,targetCols:o,targetRows:n,targetHeight:d,targetWidth:g,ratio:d/g}};if(g){var p=e(t.length>0?t[0]:null);u=c(p,p)}else u=c(h,l);for(var v,b=0,m=0,R=[],x=0;x<t.length;x++){x%u.targetCols===0&&(v={children:[],width:0,height:0},R.push(v));var y=t[x];v.children.push(y);var w=u.targetWidth,T=u.targetHeight;g&&(w=T/e(y)),v.width+=w,v.height=T}var M=0;for(x=0;x<R.length;x++){var v=R[x];v.width>a&&(v.height=Math.floor(v.height*(a/v.width)),v.width=a),M+=v.height}for(m=(r-M)/2,x=0;x<R.length;x++){var v=R[x],O=(a-v.width)/2;b=O;for(var $=0;$<v.children.length;$++){var y=v.children[$],w=u.targetWidth,T=v.height;g&&(w=Math.floor(T/e(y))),OT.$.css(y,"position","absolute");var A=w-o(y,"paddingLeft")-o(y,"paddingRight")-o(y,"marginLeft")-o(y,"marginRight")-o(y,"borderLeft")-o(y,"borderRight"),C=T-o(y,"paddingTop")-o(y,"paddingBottom")-o(y,"marginTop")-o(y,"marginBottom")-o(y,"borderTop")-o(y,"borderBottom");i(y,b+n,m+d,A,C,f),b+=w}m+=T}},g=function(t){return"none"!==OT.$.css(t,"display")},h=function(t,i){if("none"!==OT.$.css(t,"display")){var h=t.getAttribute("id");h||(h="OT_"+a(),t.setAttribute("id",h));var l=r(t)-o(t,"borderTop")-o(t,"borderBottom"),f=n(t)-o(t,"borderLeft")-o(t,"borderRight"),u=l/f,s=0,c=0,p=0,v=0,b=Array.prototype.filter.call(t.querySelectorAll("#"+h+">."+i.bigClass),g),m=Array.prototype.filter.call(t.querySelectorAll("#"+h+">*:not(."+i.bigClass+")"),g);if(b.length>0&&m.length>0){var R,x;u>e(b[0])?(R=f,x=Math.floor(l*i.bigPercentage),c=x,p=l-c):(x=l,R=Math.floor(f*i.bigPercentage),s=R,v=f-s),i.bigFirst?(d(b,R,x,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),d(m,f-s,l-c,s,c,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(d(m,f-s,l-c,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),d(b,R,x,v,p,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else b.length>0&&0===m.length?d(b,f,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):d(m,f-s,l-c,s,c,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}},l=function(t,i){return i=OT.$.defaults(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?OT.$(t):t,OT.onLoad(function(){h(t,i)}),{layout:h.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=l:module.exports.initLayoutContainer=l}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);
+!function(t){var i=function(i,e,o,a,r,n){var h={left:e+"px",top:o+"px",width:a+"px",height:r+"px"},d=function(){var t=i.querySelector(".OT_root");if(t){var e=t.style.width;t.style.width=a+"px",t.style.width=e||""}};n&&t?(t(i).stop(),t(i).animate(h,n.duration||200,n.easing||"swing",function(){d(),n.complete&&n.complete.call(this)})):OT.$.css(i,h),d()},e=function(t){if(!t)return.75;var i=t.querySelector("video");return i&&i.videoHeight&&i.videoWidth?i.videoHeight/i.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},o=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},a=function(){return(1e8*Math.random()).toFixed(0)},r=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},n=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},h=function(t,a,r,n,h,d,g,l,f){var u,s=t.length,v=function(t,i){for(var e,o,n,h,d,g,l,f,u=1;s>=u;u++){var v=u,c=Math.ceil(s/v);l=Math.floor(r/c),g=Math.floor(a/v),f=l/g,f>i?(f=i,l=g*f):t>f&&(f=t,g=l/f);var p=g*l*s;(void 0===e||p>e)&&(e=p,h=l,d=g,o=v,n=c)}return{maxArea:e,targetCols:o,targetRows:n,targetHeight:h,targetWidth:d,ratio:h/d}};if(d){var c=e(t.length>0?t[0]:null);u=v(c,c)}else u=v(g,l);for(var p,b=0,m=0,w=[],R=0;R<t.length;R++){R%u.targetCols===0&&(p={children:[],width:0,height:0},w.push(p));var x=t[R];p.children.push(x);var y=u.targetWidth,M=u.targetHeight;d&&(y=M/e(x)),p.width+=y,p.height=M}var T=0,O=0;for(R=0;R<w.length;R++){var p=w[R];p.width>a?(p.height=Math.floor(p.height*(a/p.width)),p.width=a):p.width<a&&(O+=1),T+=p.height}if(r>T&&O>0){var $=r-T;for(T=0,R=0;R<w.length;R++){var p=w[R];if(p.width<a){var A=$/O;A/p.height>(a-p.width)/p.width&&(A=Math.floor((a-p.width)/p.width*p.height)),p.width+=Math.floor(A/p.height*p.width),p.height+=A,$-=A,O-=1}T+=p.height}}for(m=(r-T)/2,R=0;R<w.length;R++){var p=w[R],C=(a-p.width)/2;b=C;for(var F=0;F<p.children.length;F++){var x=p.children[F],y=u.targetWidth,M=p.height;d&&(y=Math.floor(M/e(x))),OT.$.css(x,"position","absolute");var L=y-o(x,"paddingLeft")-o(x,"paddingRight")-o(x,"marginLeft")-o(x,"marginRight")-o(x,"borderLeft")-o(x,"borderRight"),W=M-o(x,"paddingTop")-o(x,"paddingBottom")-o(x,"marginTop")-o(x,"marginBottom")-o(x,"borderTop")-o(x,"borderBottom");i(x,b+n,m+h,L,W,f),b+=y}m+=M}},d=function(t){return"none"!==OT.$.css(t,"display")},g=function(t,i){if("none"!==OT.$.css(t,"display")){var g=t.getAttribute("id");g||(g="OT_"+a(),t.setAttribute("id",g));var l=r(t)-o(t,"borderTop")-o(t,"borderBottom"),f=n(t)-o(t,"borderLeft")-o(t,"borderRight"),u=l/f,s=0,v=0,c=0,p=0,b=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+i.bigClass),d),m=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+i.bigClass+")"),d);if(b.length>0&&m.length>0){var w,R;u>e(b[0])?(w=f,R=Math.floor(l*i.bigPercentage),v=R,c=l-v):(R=l,w=Math.floor(f*i.bigPercentage),s=w,p=f-s),i.bigFirst?(h(b,w,R,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),h(m,f-s,l-v,s,v,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(h(m,f-s,l-v,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),h(b,w,R,p,c,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else b.length>0&&0===m.length?h(b,f,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):h(m,f-s,l-v,s,v,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}},l=function(t,i){return i=OT.$.defaults(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?OT.$(t):t,OT.onLoad(function(){g(t,i)}),{layout:g.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=l:module.exports.initLayoutContainer=l}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);

package.json

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

tests/unit/opentok-layout-spec.js

@@ -36,7 +36,3 @@ /*globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
       div1 = document.createElement('div');
-      div1.videoWidth = 640;
-      div1.videoHeight = 480;
       div2 = document.createElement('div');
-      div2.videoWidth = 480;
-      div2.videoHeight = 640;
       div1.style.backgroundColor = 'green';
@@ -71,2 +67,6 @@ div2.style.backgroundColor = 'red';
     it('maintains multiple aspect ratios if you set fixedRatio:true', function () {
+      div1.videoWidth = 640;
+      div1.videoHeight = 480;
+      div2.videoWidth = 480;
+      div2.videoHeight = 640;
       var layoutContainer = initLayoutContainer(layoutDiv, {fixedRatio: true});
@@ -80,2 +80,33 @@ layoutContainer.layout();
 
+    it('grows to takes up the whole height if there are narrow elements', function() {
+      // The second element is portrait and so it doesn't take up as much
+      // space as the first one. So we should account for that and make the height larger
+      div1.videoWidth = 640;
+      div1.videoHeight = 480;
+      div2.videoWidth = 480;
+      div2.videoHeight = 640;
+      layoutDiv.style.width = '660px';
+      var layoutContainer = initLayoutContainer(layoutDiv, {fixedRatio: true});
+      layoutContainer.layout();
+      debugger;
+      var div1Rect = div1.getBoundingClientRect();
+      var div2Rect = div2.getBoundingClientRect();
+      expect(div1Rect.height).toBe(300);
+      expect(div2Rect.height).toBe(300);
+      expect(div2Rect.width).not.toBeGreaterThan(640);
+    });
+
+    it('adjusts to not go over the width if you have a wider element', function() {
+      // The second element is 720p and so we need to adjust to not go over the width
+      div1.videoWidth = 640;
+      div1.videoHeight = 480;
+      div2.videoWidth = 1280;
+      div2.videoHeight = 720;
+      layoutDiv.style.width = '600px';
+      var layoutContainer = initLayoutContainer(layoutDiv, {fixedRatio: true});
+      layoutContainer.layout();
+      var div2Rect = div2.getBoundingClientRect();
+      expect(div2Rect.left + div2Rect.width).toBeLessThan(600);
+    });
+
     it('lets you change the min and maxRatio to force a ratio', function () {
@@ -225,2 +256,15 @@ var layoutContainer = initLayoutContainer(layoutDiv, {minRatio: 9/16, maxRatio: 9/16});
 
+    it('grows to takes up the whole height if there are narrow elements', function() {
+      divs[1].videoWidth = 480;
+      divs[1].videoHeight = 640;
+      divs[2].videoWidth = 1280;
+      divs[2].videoHeight = 720;
+      layoutDiv.style.width = '400px';
+      layoutDiv.style.height = '600px';
+      var layoutContainer = initLayoutContainer(layoutDiv, {fixedRatio: true});
+      layoutContainer.layout();
+      var rect = divs[4].getBoundingClientRect();
+      expect(rect.top + rect.height).toBe(600);
+    });
+
     it('handles a big element', function () {
@@ -415,19 +459,24 @@ divs[0].className = 'OT_big';
           expect(rect.width).toBe(200);
-          expect(rect.height).toBe(266);
+          if (i > divs.length - 2) {
+            // The last row grows a little bit to take up the extra space
+            expect(rect.height).toBe(268);
+          } else {
+            expect(rect.height).toBe(266);
+          }
         }
         rect = divs[0].getBoundingClientRect();
         expect(rect.left).toBe(0);
-        expect(rect.top).toBeCloseTo(1, 0);
+        expect(rect.top).toBe(0);
         rect = divs[1].getBoundingClientRect();
         expect(rect.left).toBe(200);
-        expect(rect.top).toBeCloseTo(1, 0);
+        expect(rect.top).toBe(0);
         rect = divs[2].getBoundingClientRect();
         expect(rect.left).toBe(0);
-        expect(rect.top).toBe(267);
+        expect(rect.top).toBe(266);
         rect = divs[3].getBoundingClientRect();
         expect(rect.left).toBe(200);
-        expect(rect.top).toBeCloseTo(267, 0);
+        expect(rect.top).toBe(266);
         rect = divs[4].getBoundingClientRect();
-        expect(rect.left).toBe(100);
-        expect(rect.top).toBeCloseTo(533, 0);
+        expect(rect.left).toBe(99.5);
+        expect(rect.top).toBeCloseTo(532, 0);
       });
@@ -434,0 +483,0 @@

No alert changes

Improved metrics

Total package byte prevSize

15906467

increased by0.02%

Lines of code

997

increased by7.55%

No dependency changes