opentok-layout-js - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

bower.json

 {
   "name": "opentok-layout-js",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "homepage": "https://github.com/aullman/opentok-layout-js",
@@ -24,3 +24,5 @@ "authors": [
     "tests"
-  ]
+  ],
+  "dependencies": {
+  }
 }

gulpfile.js

@@ -12,2 +12,2 @@ var gulp = require('gulp'),
         .pipe(gulp.dest('./'));
-});
+});

opentok-layout.js

 /*!
  *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
- *  
+ *
  *  Automatic layout of video elements (publisher and subscriber) minimising 
@@ -12,3 +12,15 @@ *  white-space for the OpenTok on WebRTC API.
 
+// TODO: don't rely on internal OT.$ API.
+// in CommonJS context, this should be a `require()`d dependency.
+// in browser globals context, ...? (when using bower, there are dependencies that it has handled
+// for you, so these might be safe to assume)
+
+
+if (typeof module === 'undefined' || typeof module.exports === 'undefined') {
+  exports = window;
+}
+
 (function() {
+    var $;
+
     var positionElement = function positionElement(elem, x, y, width, height, animate) {
@@ -21,3 +33,3 @@ var targetPosition = {
         };
-        
+
         var fixAspectRatio = function () {
@@ -35,3 +47,3 @@ var sub = elem.querySelector(".OT_root");
         };
-        
+
         if (animate && $) {
@@ -44,2 +56,3 @@ $(elem).stop();
         } else {
+            // NOTE: internal OT.$ API
             OT.$.css(elem, targetPosition);
@@ -49,18 +62,21 @@ }
     };
-    
+
     var getCSSNumber = function (elem, prop) {
+        // NOTE: internal OT.$ API
         var cssStr = OT.$.css(elem, prop);
         return cssStr ? parseInt(cssStr, 10) : 0;
     };
-    
+
     var getHeight = function (elem) {
+        // NOTE: internal OT.$ API
         var heightStr = OT.$.height(elem);
         return heightStr ? parseInt(heightStr, 10) : 0;
     };
-    
+
     var getWidth = function (elem) {
+        // NOTE: internal OT.$ API
         var widthStr = OT.$.width(elem);
         return widthStr ? parseInt(widthStr, 10) : 0;
     };
-    
+
     var arrange = function arrange(children, Width, Height, offsetLeft, offsetTop, fixedRatio, minRatio, maxRatio, animate) {
@@ -70,3 +86,3 @@ var count = children.length,
             vidRatio;
-        
+
         var getBestDimensions = function getBestDimensions(minRatio, maxRatio) {
@@ -157,2 +173,3 @@ var maxArea,
 
+            // NOTE: internal OT.$ API
             OT.$.css(elem, "position", "absolute");
@@ -176,8 +193,10 @@ var actualWidth = vidRatio.targetWidth - getCSSNumber(elem, "paddingLeft") -
     };
-    
+
     var filterDisplayNone = function (element) {
+        // NOTE: internal OT.$ API
         return OT.$.css(element, "display") !== "none";
     };
-    
+
     var layout = function layout(container, opts, fixedRatio) {
+        // NOTE: internal OT.$ API
         if (OT.$.css(container, "display") === "none") {
@@ -188,6 +207,7 @@ return;
         if (!id) {
+            // NOTE: internal OT.$ API
             id = "OT_" + OT.$.uuid();
             container.setAttribute("id", id);
         }
-        
+
         var Height = getHeight(container) - 
@@ -210,3 +230,3 @@ getCSSNumber(container, "borderTop") -
                 filterDisplayNone);
-        
+
         if (bigOnes.length > 0 && smallOnes.length > 0) {
@@ -220,3 +240,3 @@ var bigVideo = bigOnes[0].querySelector("video");
             var bigWidth, bigHeight;
-            
+
             if (availableRatio > bigRatio) {
@@ -248,19 +268,41 @@ // We are tall, going to take up the whole width and arrange small guys at the bottom
         }
-     };
-     
-     if (!TB) {
-         throw new Error("You must include the OpenTok for WebRTC JS API before the layout-container library");
-     }
-     TB.initLayoutContainer = function(container, opts) {
-         opts = OT.$.defaults(opts || {}, {maxRatio: 3/2, minRatio: 9/16, fixedRatio: false, animate: false, bigClass: "OT_big", bigPercentage: 0.8, bigFixedRatio: false, bigMaxRatio: 3/2, bigMinRatio: 9/16, bigFirst: true});
-         container = typeof(container) == "string" ? OT.$(container) : container;
-        
-         OT.onLoad(function() {
-             layout(container, opts);
-         });
-        
-         return {
-             layout: layout.bind(null, container, opts)
-         };
-     };
-})();
+    };
+
+    exports.initLayoutContainer = function(container, opts) {
+        // NOTE: internal OT.$ API
+        opts = OT.$.defaults(opts || {}, {
+            maxRatio: 3/2,
+            minRatio: 9/16,
+            fixedRatio: false,
+            animate: false,
+            bigClass: "OT_big",
+            bigPercentage: 0.8,
+            bigFixedRatio: false,
+            bigMaxRatio: 3/2,
+            bigMinRatio: 9/16,
+            bigFirst: true
+        });
+        // NOTE: internal OT.$ API
+        container = typeof(container) == "string" ? OT.$(container) : container;
+
+        // TODO: should we add event hooks to external globals like this?
+        // this could be left as a responsibility of the user, and i think that would be more sound
+        // the OT.onLoad() method has (publicly) undefined behavior
+        OT.onLoad(function() {
+            layout(container, opts);
+        });
+
+        return {
+            layout: layout.bind(null, container, opts)
+        };
+    };
+
+    // jQuery is optional, so we detect its presence at runtime
+    if (typeof jQuery !== 'undefined') {
+        $ = jQuery.noConflict();
+    }
+
+    // NOTE: deprecated API, will be removed in next major version
+    OT.initLayoutContainer = exports.initLayoutContainer;
+
+})();

opentok-layout.min.js

 /*!
  *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
- *  
+ *
  *  Automatic layout of video elements (publisher and subscriber) minimising 
@@ -11,2 +11,2 @@ *  white-space for the OpenTok on WebRTC API.
 **/
-!function(){var t=function(t,i,e,a,o,r){var n={left:i+"px",top:e+"px",width:a+"px",height:o+"px"},g=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=a+"px",i.style.width=e||""}};r&&$?($(t).stop(),$(t).animate(n,r.duration||200,r.easing||"swing",function(){g(),r.complete&&r.complete.call(this)})):OT.$.css(t,n),g()},i=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},e=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},a=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},o=function(e,a,o,r,n,g,d,l,h){var s,R=e.length,b=function(t,i){for(var e,r,n,g,d,l,h,b=1;R>=b;b++){var f=b,u=Math.ceil(R/f);h=Math.floor(o/u),l=Math.floor(a/f),tRatio=h/l,tRatio>i?(tRatio=i,h=l*tRatio):t>tRatio&&(tRatio=t,l=h/tRatio);var c=l*h*R;(void 0===e||c>e)&&(e=c,g=h,d=l,r=f,n=u)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:g,targetWidth:d,ratio:s}};if(g){var f=e.length>0&&e[0].querySelector("video");s=f&&f.videoHeight&&f.videoWidth?b(f.videoHeight/f.videoWidth,f.videoHeight/f.videoWidth):b(.75,.75)}else s=b(d,l);for(var u=s.targetRows*s.targetCols-R,c=u*s.targetWidth/2,v=(s.targetRows-1)*s.targetCols,m=(o-s.targetRows*s.targetHeight)/2,p=(a-s.targetCols*s.targetWidth)/2,x=0,T=0,y=0;y<e.length;y++){var M=e[y];y%s.targetCols===0?(x=p,y==v&&(x+=c),T+=0===y?m:s.targetHeight):x+=s.targetWidth,OT.$.css(M,"position","absolute");var O=s.targetWidth-i(M,"paddingLeft")-i(M,"paddingRight")-i(M,"marginLeft")-i(M,"marginRight")-i(M,"borderLeft")-i(M,"borderRight"),$=s.targetHeight-i(M,"paddingTop")-i(M,"paddingBottom")-i(M,"marginTop")-i(M,"marginBottom")-i(M,"borderTop")-i(M,"borderBottom");t(M,x+r,T+n,O,$,h)}},r=function(t){return"none"!==OT.$.css(t,"display")},n=function(t,n){if("none"!==OT.$.css(t,"display")){var g=t.getAttribute("id");g||(g="OT_"+OT.$.uuid(),t.setAttribute("id",g));var d=e(t)-i(t,"borderTop")-i(t,"borderBottom"),l=a(t)-i(t,"borderLeft")-i(t,"borderRight"),h=d/l,s=0,R=0,b=0,f=0,u=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+n.bigClass),r),c=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+n.bigClass+")"),r);if(u.length>0&&c.length>0){var v=u[0].querySelector("video");bigRatio=v&&v.videoHeight&&v.videoWidth?v.videoHeight/v.videoWidth:.75;var m,p;h>bigRatio?(m=l,p=Math.min(Math.floor(d*n.bigPercentage),l*bigRatio),R=p,b=d-R):(p=d,m=Math.min(l*n.bigPercentage,Math.floor(p/bigRatio)),s=m,f=l-s),n.bigFirst?(o(u,m,p,0,0,n.bigFixedRatio,n.bigMinRatio,n.bigMaxRatio,n.animate),o(c,l-s,d-R,s,R,n.fixedRatio,n.minRatio,n.maxRatio,n.animate)):(o(c,l-s,d-R,0,0,n.fixedRatio,n.minRatio,n.maxRatio,n.animate),o(u,m,p,f,b,n.bigFixedRatio,n.bigMinRatio,n.bigMaxRatio,n.animate))}else u.length>0&&0===c.length?o(u,l,d,0,0,n.bigFixedRatio,n.bigMinRatio,n.bigMaxRatio,n.animate):o(c,l-s,d-R,s,R,n.fixedRatio,n.minRatio,n.maxRatio,n.animate)}};if(!TB)throw new Error("You must include the OpenTok for WebRTC JS API before the layout-container library");TB.initLayoutContainer=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(){n(t,i)}),{layout:n.bind(null,t,i)}}}();
+("undefined"==typeof module||"undefined"==typeof module.exports)&&(exports=window),function(){var t,i=function(i,e,o,a,r,n){var g={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(g,n.duration||200,n.easing||"swing",function(){d(),n.complete&&n.complete.call(this)})):OT.$.css(i,g),d()},e=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},o=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},a=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},r=function(t,o,a,r,n,g,d,l,s){var h,f=t.length,R=function(t,i){for(var e,r,n,g,d,l,s,R=1;f>=R;R++){var u=R,b=Math.ceil(f/u);s=Math.floor(a/b),l=Math.floor(o/u),tRatio=s/l,tRatio>i?(tRatio=i,s=l*tRatio):tRatio<t&&(tRatio=t,l=s/tRatio);var p=l*s*f;(void 0===e||p>e)&&(e=p,g=s,d=l,r=u,n=b)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:g,targetWidth:d,ratio:h}};if(g){var u=t.length>0&&t[0].querySelector("video");h=u&&u.videoHeight&&u.videoWidth?R(u.videoHeight/u.videoWidth,u.videoHeight/u.videoWidth):R(.75,.75)}else h=R(d,l);for(var b=h.targetRows*h.targetCols-f,p=b*h.targetWidth/2,c=(h.targetRows-1)*h.targetCols,v=(a-h.targetRows*h.targetHeight)/2,m=(o-h.targetCols*h.targetWidth)/2,x=0,y=0,T=0;T<t.length;T++){var M=t[T];T%h.targetCols===0?(x=m,T==c&&(x+=p),y+=0===T?v:h.targetHeight):x+=h.targetWidth,OT.$.css(M,"position","absolute");var O=h.targetWidth-e(M,"paddingLeft")-e(M,"paddingRight")-e(M,"marginLeft")-e(M,"marginRight")-e(M,"borderLeft")-e(M,"borderRight"),w=h.targetHeight-e(M,"paddingTop")-e(M,"paddingBottom")-e(M,"marginTop")-e(M,"marginBottom")-e(M,"borderTop")-e(M,"borderBottom");i(M,x+r,y+n,O,w,s)}},n=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_"+OT.$.uuid(),t.setAttribute("id",g));var d=o(t)-e(t,"borderTop")-e(t,"borderBottom"),l=a(t)-e(t,"borderLeft")-e(t,"borderRight"),s=d/l,h=0,f=0,R=0,u=0,b=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+i.bigClass),n),p=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+i.bigClass+")"),n);if(b.length>0&&p.length>0){var c=b[0].querySelector("video");bigRatio=c&&c.videoHeight&&c.videoWidth?c.videoHeight/c.videoWidth:.75;var v,m;s>bigRatio?(v=l,m=Math.min(Math.floor(d*i.bigPercentage),l*bigRatio),f=m,R=d-f):(m=d,v=Math.min(l*i.bigPercentage,Math.floor(m/bigRatio)),h=v,u=l-h),i.bigFirst?(r(b,v,m,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),r(p,l-h,d-f,h,f,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(r(p,l-h,d-f,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),r(b,v,m,u,R,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else b.length>0&&0===p.length?r(b,l,d,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):r(p,l-h,d-f,h,f,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}};exports.initLayoutContainer=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 jQuery&&(t=jQuery.noConflict())}();

package.json

 {
   "name": "opentok-layout-js",
-  "version": "0.0.12",
+  "version": "0.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.",
-  "main": "gulpfile.js",
+  "main": "opentok-layout.js",
   "dependencies": {
@@ -10,9 +10,16 @@ "gulp": "~3.5.5"
   "devDependencies": {
+    "codeclimate-test-reporter": "0.0.4",
     "gulp": "~3.5.5",
+    "gulp-jshint": "~1.5.0",
+    "gulp-rename": "~1.1.0",
     "gulp-uglify": "~0.2.1",
-    "gulp-jshint": "~1.5.0",
-    "gulp-rename": "~1.1.0"
+    "karma": "^0.12.22",
+    "karma-chrome-launcher": "^0.1.4",
+    "karma-coverage": "^0.2.7",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-jasmine": "~0.2.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node node_modules/karma/bin/karma start karma.conf.js --single-run --browsers Firefox",
+    "postinstall": "gulp"
   },
@@ -19,0 +26,0 @@ "repository": {

README.md

@@ -0,1 +1,5 @@
+[![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
+[![Code Climate](https://codeclimate.com/github/aullman/opentok-layout-js/badges/gpa.svg)](https://codeclimate.com/github/aullman/opentok-layout-js)
+[![Test Coverage](https://codeclimate.com/github/aullman/opentok-layout-js/badges/coverage.svg)](https://codeclimate.com/github/aullman/opentok-layout-js)
+
 opentok-layout-js
@@ -11,3 +15,3 @@ ================
 
-[Demo of layout container in action](http://aullman.github.io/opentok-layout-js/ "Layout-container Demo")
+[Demo of layout container in action](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo")
 
@@ -22,6 +26,6 @@ Dependencies
 
-Call `TB.initLayoutContainer` and pass it the element you want it to layout. It works best if you set the position of the element to be absolute or relative. You will then be returned an object with a layout method that you can call to layout the page.
+Call `initLayoutContainer` and pass it the element you want it to layout. It works best if you set the position of the element to be absolute or relative. You will then be returned an object with a layout method that you can call to layout the page.
 
 ```javascript
-var layout = TB.initLayoutContainer(document.getElementById("layout"), {
+var layout = initLayoutContainer(document.getElementById("layout"), {
     maxRatio: 3/2,     // The narrowest ratio that will be used (default 2x3)
@@ -47,4 +51,4 @@ minRatio: 9/16,      // The widest ratio that will be used (default 16x9)
     <title>Layout Container Example</title>
-    <script src="http://static.opentok.com/webrtc/v2.2/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
-    <script src="js/opentok-layout.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="http://static.opentok.com/v2/js/opentok.min.js"></script>
+    <script src="js/opentok-layout.min.js"></script>
     <style type="text/css" media="screen">
@@ -68,5 +72,5 @@ #layoutContainer {
     // Initialize the layout container and get a reference to the layout method
-    var layout = TB.initLayoutContainer(layoutContainer).layout;
+    var layout = initLayoutContainer(layoutContainer).layout;
     
-    // Below is a normal hello world OpenTok application for v2.2 of the API
+    // Below is a normal hello world OpenTok application for v2 of the API
     // The layout container will redraw when the layout mtehod is called and
@@ -78,3 +82,3 @@ // adjust the layout accordingly
     
-    var session = TB.initSession(sessionId);
+    var session = OT.initSession(sessionId);
     session.on("streamCreated", function(event){
@@ -81,0 +85,0 @@ session.subscribe(event.stream, "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

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38091

increased by47.89%

Number of package files

11

increased by37.5%

Lines of code

559

increased by106.27%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

144

increased by2.86%

Worsened metrics

Dev dependency count

10

increased by150%

Number of high supply chain risk alerts

1

increased byInfinity%

No dependency changes