opentok-layout-js
Advanced tools
opentok-layout-js - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
| { | ||
| "name": "opentok-layout-js", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "homepage": "https://github.com/aullman/opentok-layout-js", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -12,2 +12,4 @@ /*! | ||
| /* global OT */ | ||
| // TODO: don't rely on internal OT.$ API. | ||
@@ -19,17 +21,13 @@ // in CommonJS context, this should be a `require()`d dependency. | ||
| if (typeof module === 'undefined' || typeof module.exports === 'undefined') { | ||
| exports = window; | ||
| } | ||
| (function($) { | ||
| var positionElement = function positionElement(elem, x, y, width, height, animate) { | ||
| var targetPosition = { | ||
| left: x + "px", | ||
| top: y + "px", | ||
| width: width + "px", | ||
| height: height + "px" | ||
| left: x + 'px', | ||
| top: y + 'px', | ||
| width: width + 'px', | ||
| height: height + 'px' | ||
| }; | ||
| var fixAspectRatio = function () { | ||
| var sub = elem.querySelector(".OT_root"); | ||
| var sub = elem.querySelector('.OT_root'); | ||
| if (sub) { | ||
@@ -40,5 +38,5 @@ // If this is the parent of a subscriber or publisher then we need | ||
| var oldWidth = sub.style.width; | ||
| sub.style.width = width + "px"; | ||
| // sub.style.height = height + "px"; | ||
| sub.style.width = oldWidth || ""; | ||
| sub.style.width = width + 'px'; | ||
| // sub.style.height = height + 'px'; | ||
| sub.style.width = oldWidth || ''; | ||
| } | ||
@@ -49,3 +47,4 @@ }; | ||
| $(elem).stop(); | ||
| $(elem).animate(targetPosition, animate.duration || 200, animate.easing || "swing", function () { | ||
| $(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing', | ||
| function () { | ||
| fixAspectRatio(); | ||
@@ -84,5 +83,5 @@ if (animate.complete) animate.complete.call(this); | ||
| var arrange = function arrange(children, Width, Height, offsetLeft, offsetTop, fixedRatio, minRatio, maxRatio, animate) { | ||
| var arrange = function arrange(children, Width, Height, offsetLeft, offsetTop, fixedRatio, | ||
| minRatio, maxRatio, animate) { | ||
| var count = children.length, | ||
| availableRatio = Height / Width, | ||
| vidRatio; | ||
@@ -146,3 +145,3 @@ | ||
| // Use the ratio of the first video element we find | ||
| var video = children.length > 0 && children[0].querySelector("video"); | ||
| var video = children.length > 0 && children[0].querySelector('video'); | ||
| if (video && video.videoHeight && video.videoWidth) { | ||
@@ -171,3 +170,3 @@ vidRatio = getBestDimensions(video.videoHeight/video.videoWidth, | ||
| x = firstColMarginLeft; | ||
| if (i == lastRowIndex) x += lastRowMargin; | ||
| if (i === lastRowIndex) x += lastRowMargin; | ||
| y += i === 0 ? firstRowMarginTop : vidRatio.targetHeight; | ||
@@ -179,16 +178,16 @@ } else { | ||
| // NOTE: internal OT.$ API | ||
| OT.$.css(elem, "position", "absolute"); | ||
| var actualWidth = vidRatio.targetWidth - getCSSNumber(elem, "paddingLeft") - | ||
| getCSSNumber(elem, "paddingRight") - | ||
| getCSSNumber(elem, "marginLeft") - | ||
| getCSSNumber(elem, "marginRight") - | ||
| getCSSNumber(elem, "borderLeft") - | ||
| getCSSNumber(elem, "borderRight"); | ||
| OT.$.css(elem, 'position', 'absolute'); | ||
| var actualWidth = vidRatio.targetWidth - getCSSNumber(elem, 'paddingLeft') - | ||
| getCSSNumber(elem, 'paddingRight') - | ||
| getCSSNumber(elem, 'marginLeft') - | ||
| getCSSNumber(elem, 'marginRight') - | ||
| getCSSNumber(elem, 'borderLeft') - | ||
| getCSSNumber(elem, 'borderRight'); | ||
| var actualHeight = vidRatio.targetHeight - getCSSNumber(elem, "paddingTop") - | ||
| getCSSNumber(elem, "paddingBottom") - | ||
| getCSSNumber(elem, "marginTop") - | ||
| getCSSNumber(elem, "marginBottom") - | ||
| getCSSNumber(elem, "borderTop") - | ||
| getCSSNumber(elem, "borderBottom"); | ||
| var actualHeight = vidRatio.targetHeight - getCSSNumber(elem, 'paddingTop') - | ||
| getCSSNumber(elem, 'paddingBottom') - | ||
| getCSSNumber(elem, 'marginTop') - | ||
| getCSSNumber(elem, 'marginBottom') - | ||
| getCSSNumber(elem, 'borderTop') - | ||
| getCSSNumber(elem, 'borderBottom'); | ||
@@ -201,22 +200,22 @@ positionElement(elem, x+offsetLeft, y+offsetTop, actualWidth, actualHeight, animate); | ||
| // NOTE: internal OT.$ API | ||
| return OT.$.css(element, "display") !== "none"; | ||
| return OT.$.css(element, 'display') !== 'none'; | ||
| }; | ||
| var layout = function layout(container, opts, fixedRatio) { | ||
| var layout = function layout(container, opts) { | ||
| // NOTE: internal OT.$ API | ||
| if (OT.$.css(container, "display") === "none") { | ||
| if (OT.$.css(container, 'display') === 'none') { | ||
| return; | ||
| } | ||
| var id = container.getAttribute("id"); | ||
| var id = container.getAttribute('id'); | ||
| if (!id) { | ||
| id = "OT_" + cheapUUID(); | ||
| container.setAttribute("id", id); | ||
| id = 'OT_' + cheapUUID(); | ||
| container.setAttribute('id', id); | ||
| } | ||
| var Height = getHeight(container) - | ||
| getCSSNumber(container, "borderTop") - | ||
| getCSSNumber(container, "borderBottom"), | ||
| getCSSNumber(container, 'borderTop') - | ||
| getCSSNumber(container, 'borderBottom'), | ||
| Width = getWidth(container) - | ||
| getCSSNumber(container, "borderLeft") - | ||
| getCSSNumber(container, "borderRight"), | ||
| getCSSNumber(container, 'borderLeft') - | ||
| getCSSNumber(container, 'borderRight'), | ||
| availableRatio = Height/Width, | ||
@@ -229,10 +228,10 @@ offsetLeft = 0, | ||
| bigOnes = Array.prototype.filter.call( | ||
| container.querySelectorAll("#" + id + ">." + opts.bigClass), | ||
| container.querySelectorAll('#' + id + '>.' + opts.bigClass), | ||
| filterDisplayNone), | ||
| smallOnes = Array.prototype.filter.call( | ||
| container.querySelectorAll("#" + id + ">*:not(." + opts.bigClass + ")"), | ||
| container.querySelectorAll('#' + id + '>*:not(.' + opts.bigClass + ')'), | ||
| filterDisplayNone); | ||
| if (bigOnes.length > 0 && smallOnes.length > 0) { | ||
| var bigVideo = bigOnes[0].querySelector("video"); | ||
| var bigVideo = bigOnes[0].querySelector('video'); | ||
| if (bigVideo && bigVideo.videoHeight && bigVideo.videoWidth) { | ||
@@ -246,3 +245,4 @@ bigRatio = bigVideo.videoHeight / bigVideo.videoWidth; | ||
| if (availableRatio > bigRatio) { | ||
| // We are tall, going to take up the whole width and arrange small guys at the bottom | ||
| // We are tall, going to take up the whole width and arrange small | ||
| // guys at the bottom | ||
| bigWidth = Width; | ||
@@ -253,3 +253,4 @@ bigHeight = Math.min(Math.floor(Height * opts.bigPercentage), Width * bigRatio); | ||
| } else { | ||
| // We are wide, going to take up the whole height and arrange the small guys on the right | ||
| // We are wide, going to take up the whole height and arrange the small | ||
| // guys on the right | ||
| bigHeight = Height; | ||
@@ -261,17 +262,23 @@ bigWidth = Math.min(Width * opts.bigPercentage, Math.floor(bigHeight / bigRatio)); | ||
| if (opts.bigFirst) { | ||
| arrange(bigOnes, bigWidth, bigHeight, 0, 0, opts.bigFixedRatio, opts.bigMinRatio, opts.bigMaxRatio, opts.animate); | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, offsetLeft, offsetTop, opts.fixedRatio, opts.minRatio, opts.maxRatio, opts.animate); | ||
| arrange(bigOnes, bigWidth, bigHeight, 0, 0, opts.bigFixedRatio, opts.bigMinRatio, | ||
| opts.bigMaxRatio, opts.animate); | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, offsetLeft, offsetTop, | ||
| opts.fixedRatio, opts.minRatio, opts.maxRatio, opts.animate); | ||
| } else { | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, 0, 0, opts.fixedRatio, opts.minRatio, opts.maxRatio, opts.animate); | ||
| arrange(bigOnes, bigWidth, bigHeight, bigOffsetLeft, bigOffsetTop, opts.bigFixedRatio, opts.bigMinRatio, opts.bigMaxRatio, opts.animate); | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, 0, 0, opts.fixedRatio, | ||
| opts.minRatio, opts.maxRatio, opts.animate); | ||
| arrange(bigOnes, bigWidth, bigHeight, bigOffsetLeft, bigOffsetTop, | ||
| opts.bigFixedRatio, opts.bigMinRatio, opts.bigMaxRatio, opts.animate); | ||
| } | ||
| } else if (bigOnes.length > 0 && smallOnes.length === 0) { | ||
| // We only have one bigOne just center it | ||
| arrange(bigOnes, Width, Height, 0, 0, opts.bigFixedRatio, opts.bigMinRatio, opts.bigMaxRatio, opts.animate); | ||
| arrange(bigOnes, Width, Height, 0, 0, opts.bigFixedRatio, opts.bigMinRatio, | ||
| opts.bigMaxRatio, opts.animate); | ||
| } else { | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, offsetLeft, offsetTop, opts.fixedRatio, opts.minRatio, opts.maxRatio, opts.animate); | ||
| arrange(smallOnes, Width - offsetLeft, Height - offsetTop, offsetLeft, offsetTop, | ||
| opts.fixedRatio, opts.minRatio, opts.maxRatio, opts.animate); | ||
| } | ||
| }; | ||
| exports.initLayoutContainer = function(container, opts) { | ||
| var initLayoutContainer = function(container, opts) { | ||
| // NOTE: internal OT.$ API | ||
@@ -283,3 +290,3 @@ opts = OT.$.defaults(opts || {}, { | ||
| animate: false, | ||
| bigClass: "OT_big", | ||
| bigClass: 'OT_big', | ||
| bigPercentage: 0.8, | ||
@@ -292,3 +299,3 @@ bigFixedRatio: false, | ||
| // NOTE: internal OT.$ API | ||
| container = typeof(container) == "string" ? OT.$(container) : container; | ||
| container = typeof(container) === 'string' ? OT.$(container) : container; | ||
@@ -307,2 +314,8 @@ // TODO: should we add event hooks to external globals like this? | ||
| })((typeof window !== 'undefined' && window.hasOwnProperty('jQuery')) ? jQuery : undefined); | ||
| if (typeof module === 'undefined' || typeof module.exports === 'undefined') { | ||
| window.initLayoutContainer = initLayoutContainer; | ||
| } else { | ||
| module.exports.initLayoutContainer = initLayoutContainer; | ||
| } | ||
| })((typeof window !== 'undefined' && window.hasOwnProperty('jQuery')) ? window.jQuery : undefined); |
@@ -11,2 +11,2 @@ /*! | ||
| **/ | ||
| ("undefined"==typeof module||"undefined"==typeof module.exports)&&(exports=window),function(t){var 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(){return(1e8*Math.random()).toFixed(0)},a=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},r=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},n=function(t,o,a,r,n,g,d,l,s){var h,f=t.length,u=function(t,i){for(var e,r,n,g,d,l,s,u,p=1;f>=p;p++){var b=p,c=Math.ceil(f/b);s=Math.floor(a/c),l=Math.floor(o/b),u=s/l,u>i?(u=i,s=l*u):t>u&&(u=t,l=s/u);var v=l*s*f;(void 0===e||v>e)&&(e=v,g=s,d=l,r=b,n=c)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:g,targetWidth:d,ratio:h}};if(g){var p=t.length>0&&t[0].querySelector("video");h=p&&p.videoHeight&&p.videoWidth?u(p.videoHeight/p.videoWidth,p.videoHeight/p.videoWidth):u(.75,.75)}else h=u(d,l);for(var b=h.targetRows*h.targetCols-f,c=b*h.targetWidth/2,v=(h.targetRows-1)*h.targetCols,m=(a-h.targetRows*h.targetHeight)/2,R=(o-h.targetCols*h.targetWidth)/2,x=0,y=0,w=0;w<t.length;w++){var T=t[w];w%h.targetCols===0?(x=R,w==v&&(x+=c),y+=0===w?m:h.targetHeight):x+=h.targetWidth,OT.$.css(T,"position","absolute");var M=h.targetWidth-e(T,"paddingLeft")-e(T,"paddingRight")-e(T,"marginLeft")-e(T,"marginRight")-e(T,"borderLeft")-e(T,"borderRight"),O=h.targetHeight-e(T,"paddingTop")-e(T,"paddingBottom")-e(T,"marginTop")-e(T,"marginBottom")-e(T,"borderTop")-e(T,"borderBottom");i(T,x+r,y+n,M,O,s)}},g=function(t){return"none"!==OT.$.css(t,"display")},d=function(t,i){if("none"!==OT.$.css(t,"display")){var d=t.getAttribute("id");d||(d="OT_"+o(),t.setAttribute("id",d));var l=a(t)-e(t,"borderTop")-e(t,"borderBottom"),s=r(t)-e(t,"borderLeft")-e(t,"borderRight"),h=l/s,f=0,u=0,p=0,b=0,c=0,v=Array.prototype.filter.call(t.querySelectorAll("#"+d+">."+i.bigClass),g),m=Array.prototype.filter.call(t.querySelectorAll("#"+d+">*:not(."+i.bigClass+")"),g);if(v.length>0&&m.length>0){var R=v[0].querySelector("video");c=R&&R.videoHeight&&R.videoWidth?R.videoHeight/R.videoWidth:.75;var x,y;h>c?(x=s,y=Math.min(Math.floor(l*i.bigPercentage),s*c),u=y,p=l-u):(y=l,x=Math.min(s*i.bigPercentage,Math.floor(y/c)),f=x,b=s-f),i.bigFirst?(n(v,x,y,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),n(m,s-f,l-u,f,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(n(m,s-f,l-u,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),n(v,x,y,b,p,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else v.length>0&&0===m.length?n(v,s,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):n(m,s-f,l-u,f,u,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(){d(t,i)}),{layout:d.bind(null,t,i)}}}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?jQuery:void 0); | ||
| !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,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},o=function(){return(1e8*Math.random()).toFixed(0)},a=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},r=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},n=function(t,o,a,r,n,d,g,l,h){var s,f=t.length,u=function(t,i){for(var e,r,n,d,g,l,h,u,p=1;f>=p;p++){var b=p,c=Math.ceil(f/b);h=Math.floor(a/c),l=Math.floor(o/b),u=h/l,u>i?(u=i,h=l*u):t>u&&(u=t,l=h/u);var m=l*h*f;(void 0===e||m>e)&&(e=m,d=h,g=l,r=b,n=c)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:d,targetWidth:g,ratio:s}};if(d){var p=t.length>0&&t[0].querySelector("video");s=p&&p.videoHeight&&p.videoWidth?u(p.videoHeight/p.videoWidth,p.videoHeight/p.videoWidth):u(.75,.75)}else s=u(g,l);for(var b=s.targetRows*s.targetCols-f,c=b*s.targetWidth/2,m=(s.targetRows-1)*s.targetCols,v=(a-s.targetRows*s.targetHeight)/2,R=(o-s.targetCols*s.targetWidth)/2,x=0,y=0,w=0;w<t.length;w++){var T=t[w];w%s.targetCols===0?(x=R,w===m&&(x+=c),y+=0===w?v:s.targetHeight):x+=s.targetWidth,OT.$.css(T,"position","absolute");var M=s.targetWidth-e(T,"paddingLeft")-e(T,"paddingRight")-e(T,"marginLeft")-e(T,"marginRight")-e(T,"borderLeft")-e(T,"borderRight"),O=s.targetHeight-e(T,"paddingTop")-e(T,"paddingBottom")-e(T,"marginTop")-e(T,"marginBottom")-e(T,"borderTop")-e(T,"borderBottom");i(T,x+r,y+n,M,O,h)}},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_"+o(),t.setAttribute("id",g));var l=a(t)-e(t,"borderTop")-e(t,"borderBottom"),h=r(t)-e(t,"borderLeft")-e(t,"borderRight"),s=l/h,f=0,u=0,p=0,b=0,c=0,m=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+i.bigClass),d),v=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+i.bigClass+")"),d);if(m.length>0&&v.length>0){var R=m[0].querySelector("video");c=R&&R.videoHeight&&R.videoWidth?R.videoHeight/R.videoWidth:.75;var x,y;s>c?(x=h,y=Math.min(Math.floor(l*i.bigPercentage),h*c),u=y,p=l-u):(y=l,x=Math.min(h*i.bigPercentage,Math.floor(y/c)),f=x,b=h-f),i.bigFirst?(n(m,x,y,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),n(v,h-f,l-u,f,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(n(v,h-f,l-u,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),n(m,x,y,b,p,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else m.length>0&&0===v.length?n(m,h,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):n(v,h-f,l-u,f,u,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); |
| { | ||
| "name": "opentok-layout-js", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "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", |
@@ -25,3 +25,3 @@ // Karma configuration | ||
| files: [ | ||
| 'https://static.opentok.com/v2/js/opentok.js', | ||
| 'https://tbdev.tokbox.com/v2/js/opentok.min.js', | ||
| '../opentok-layout.js', | ||
@@ -28,0 +28,0 @@ '**/*spec.js' |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
8915070
- Lines of code
- increased by1.38%
881
No dependency changes