Socket
Socket
Sign inDemoInstall

opentok-layout-js

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

opentok-layout-js - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

2

bower.json
{
"name": "opentok-layout-js",
"version": "2.0.0",
"version": "2.1.0",
"homepage": "https://github.com/aullman/opentok-layout-js",

@@ -5,0 +5,0 @@ "authors": [

3

opentok-layout.js

@@ -93,2 +93,5 @@ /*!

css(elem, targetPosition);
if (!elem.classList.contains('ot-layout')) {
elem.classList.add('ot-layout');
}
}

@@ -95,0 +98,0 @@ fixAspectRatio();

2

opentok-layout.min.js

@@ -11,2 +11,2 @@ /*!

**/
!function(t){function i(t,e,o){if(o)t.style[e]=o;else{if("object"!=typeof e){var r=getComputedStyle(t),a=r.getPropertyValue(e);return""===a&&(a=t.style[e]),a}Object.keys(e).forEach(function(o){i(t,o,e[o])})}}function e(t){return t.offsetHeight>0?t.offsetHeight+"px":i(t,"height")}function o(t){return t.offsetWidth>0?t.offsetWidth+"px":i(t,"width")}function r(t,i){var e={};return Object.keys(i).forEach(function(o){t.hasOwnProperty(o)?e[o]=t[o]:e[o]=i[o]}),e}var a=function(e,o,r,a,n,h){var d={left:o+"px",top:r+"px",width:a+"px",height:n+"px"},g=function(){var t=e.querySelector(".OT_root");if(t){var i=t.style.width;t.style.width=a+"px",t.style.width=i||""}};h&&t?(t(e).stop(),t(e).animate(d,h.duration||200,h.easing||"swing",function(){g(),h.complete&&h.complete.call(this)})):i(e,d),g()},n=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},h=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},d=function(){return(1e8*Math.random()).toFixed(0)},g=function(t){var i=e(t);return i?parseInt(i,10):0},f=function(t){var i=o(t);return i?parseInt(i,10):0},l=function(t,e,o,r,d,g,f,l,u){var c,s=t.length,p=function(t,i){for(var r,a,n,h,d,g,f,l,u=1;s>=u;u++){var c=u,p=Math.ceil(s/c);f=Math.floor(o/p),g=Math.floor(e/c),l=f/g,l>i?(l=i,f=g*l):t>l&&(l=t,g=f/l);var v=g*f*s;(void 0===r||v>r)&&(r=v,h=f,d=g,a=c,n=p)}return{maxArea:r,targetCols:a,targetRows:n,targetHeight:h,targetWidth:d,ratio:h/d}};if(g){var v=n(t.length>0?t[0]:null);c=p(v,v)}else c=p(f,l);for(var b,m=0,w=0,y=[],R=0;R<t.length;R++){R%c.targetCols===0&&(b={children:[],width:0,height:0},y.push(b));var x=t[R];b.children.push(x);var M=c.targetWidth,W=c.targetHeight;g&&(M=W/n(x)),b.width+=M,b.height=W}var C=0,H=0;for(R=0;R<y.length;R++){var b=y[R];b.width>e?(b.height=Math.floor(b.height*(e/b.width)),b.width=e):b.width<e&&(H+=1),C+=b.height}if(o>C&&H>0){var A=o-C;for(C=0,R=0;R<y.length;R++){var b=y[R];if(b.width<e){var F=A/H;F/b.height>(e-b.width)/b.width&&(F=Math.floor((e-b.width)/b.width*b.height)),b.width+=Math.floor(F/b.height*b.width),b.height+=F,A-=F,H-=1}C+=b.height}}for(w=(o-C)/2,R=0;R<y.length;R++){var b=y[R],L=(e-b.width)/2;m=L;for(var O=0;O<b.children.length;O++){var x=b.children[O],M=c.targetWidth,W=b.height;g&&(M=Math.floor(W/n(x))),i(x,"position","absolute");var S=M-h(x,"paddingLeft")-h(x,"paddingRight")-h(x,"marginLeft")-h(x,"marginRight")-h(x,"borderLeft")-h(x,"borderRight"),T=W-h(x,"paddingTop")-h(x,"paddingBottom")-h(x,"marginTop")-h(x,"marginBottom")-h(x,"borderTop")-h(x,"borderBottom");a(x,m+r,w+d,S,T,u),m+=M}w+=W}},u=function(t){return"none"!==i(t,"display")},c=function(t,e){if("none"!==i(t,"display")){var o=t.getAttribute("id");o||(o="OT_"+d(),t.setAttribute("id",o));var r=g(t)-h(t,"borderTop")-h(t,"borderBottom"),a=f(t)-h(t,"borderLeft")-h(t,"borderRight"),c=r/a,s=0,p=0,v=0,b=0,m=Array.prototype.filter.call(t.querySelectorAll("#"+o+">."+e.bigClass),u),w=Array.prototype.filter.call(t.querySelectorAll("#"+o+">*:not(."+e.bigClass+")"),u);if(m.length>0&&w.length>0){var y,R;c>n(m[0])?(y=a,R=Math.floor(r*e.bigPercentage),p=R,v=r-p):(R=r,y=Math.floor(a*e.bigPercentage),s=y,b=a-s),e.bigFirst?(l(m,y,R,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate),l(w,a-s,r-p,s,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)):(l(w,a-s,r-p,0,0,e.fixedRatio,e.minRatio,e.maxRatio,e.animate),l(m,y,R,b,v,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate))}else m.length>0&&0===w.length?l(m,a,r,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate):l(w,a-s,r-p,s,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)}},s=function(t,i){return i=r(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?document.querySelector(t):t,"complete"===document.readyState?c(t,i):window.addEventListener("load",function(){c(t,i)}),{layout:c.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=s:module.exports.initLayoutContainer=s}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);
!function(t){function i(t,e,o){if(o)t.style[e]=o;else{if("object"!=typeof e){var r=getComputedStyle(t),a=r.getPropertyValue(e);return""===a&&(a=t.style[e]),a}Object.keys(e).forEach(function(o){i(t,o,e[o])})}}function e(t){return t.offsetHeight>0?t.offsetHeight+"px":i(t,"height")}function o(t){return t.offsetWidth>0?t.offsetWidth+"px":i(t,"width")}function r(t,i){var e={};return Object.keys(i).forEach(function(o){t.hasOwnProperty(o)?e[o]=t[o]:e[o]=i[o]}),e}var a=function(e,o,r,a,n,d){var h={left:o+"px",top:r+"px",width:a+"px",height:n+"px"},g=function(){var t=e.querySelector(".OT_root");if(t){var i=t.style.width;t.style.width=a+"px",t.style.width=i||""}};d&&t?(t(e).stop(),t(e).animate(h,d.duration||200,d.easing||"swing",function(){g(),d.complete&&d.complete.call(this)})):(i(e,h),e.classList.contains("ot-layout")||e.classList.add("ot-layout")),g()},n=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},d=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},h=function(){return(1e8*Math.random()).toFixed(0)},g=function(t){var i=e(t);return i?parseInt(i,10):0},l=function(t){var i=o(t);return i?parseInt(i,10):0},f=function(t,e,o,r,h,g,l,f,u){var s,c=t.length,p=function(t,i){for(var r,a,n,d,h,g,l,f,u=1;c>=u;u++){var s=u,p=Math.ceil(c/s);l=Math.floor(o/p),g=Math.floor(e/s),f=l/g,f>i?(f=i,l=g*f):t>f&&(f=t,g=l/f);var v=g*l*c;(void 0===r||v>r)&&(r=v,d=l,h=g,a=s,n=p)}return{maxArea:r,targetCols:a,targetRows:n,targetHeight:d,targetWidth:h,ratio:d/h}};if(g){var v=n(t.length>0?t[0]:null);s=p(v,v)}else s=p(l,f);for(var b,m=0,y=0,w=[],R=0;R<t.length;R++){R%s.targetCols===0&&(b={children:[],width:0,height:0},w.push(b));var x=t[R];b.children.push(x);var M=s.targetWidth,L=s.targetHeight;g&&(M=L/n(x)),b.width+=M,b.height=L}var W=0,C=0;for(R=0;R<w.length;R++){var b=w[R];b.width>e?(b.height=Math.floor(b.height*(e/b.width)),b.width=e):b.width<e&&(C+=1),W+=b.height}if(o>W&&C>0){var H=o-W;for(W=0,R=0;R<w.length;R++){var b=w[R];if(b.width<e){var A=H/C;A/b.height>(e-b.width)/b.width&&(A=Math.floor((e-b.width)/b.width*b.height)),b.width+=Math.floor(A/b.height*b.width),b.height+=A,H-=A,C-=1}W+=b.height}}for(y=(o-W)/2,R=0;R<w.length;R++){var b=w[R],F=(e-b.width)/2;m=F;for(var O=0;O<b.children.length;O++){var x=b.children[O],M=s.targetWidth,L=b.height;g&&(M=Math.floor(L/n(x))),i(x,"position","absolute");var S=M-d(x,"paddingLeft")-d(x,"paddingRight")-d(x,"marginLeft")-d(x,"marginRight")-d(x,"borderLeft")-d(x,"borderRight"),T=L-d(x,"paddingTop")-d(x,"paddingBottom")-d(x,"marginTop")-d(x,"marginBottom")-d(x,"borderTop")-d(x,"borderBottom");a(x,m+r,y+h,S,T,u),m+=M}y+=L}},u=function(t){return"none"!==i(t,"display")},s=function(t,e){if("none"!==i(t,"display")){var o=t.getAttribute("id");o||(o="OT_"+h(),t.setAttribute("id",o));var r=g(t)-d(t,"borderTop")-d(t,"borderBottom"),a=l(t)-d(t,"borderLeft")-d(t,"borderRight"),s=r/a,c=0,p=0,v=0,b=0,m=Array.prototype.filter.call(t.querySelectorAll("#"+o+">."+e.bigClass),u),y=Array.prototype.filter.call(t.querySelectorAll("#"+o+">*:not(."+e.bigClass+")"),u);if(m.length>0&&y.length>0){var w,R;s>n(m[0])?(w=a,R=Math.floor(r*e.bigPercentage),p=R,v=r-p):(R=r,w=Math.floor(a*e.bigPercentage),c=w,b=a-c),e.bigFirst?(f(m,w,R,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate),f(y,a-c,r-p,c,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)):(f(y,a-c,r-p,0,0,e.fixedRatio,e.minRatio,e.maxRatio,e.animate),f(m,w,R,b,v,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate))}else m.length>0&&0===y.length?f(m,a,r,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate):f(y,a-c,r-p,c,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)}},c=function(t,i){return i=r(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?document.querySelector(t):t,"complete"===document.readyState?s(t,i):window.addEventListener("load",function(){s(t,i)}),{layout:s.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=c:module.exports.initLayoutContainer=c}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);

2

package.json
{
"name": "opentok-layout-js",
"version": "2.0.2",
"version": "2.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",

37

README.md

@@ -24,4 +24,2 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)

jQuery is also optionally required if you want to animate the transitions.
Usage

@@ -171,13 +169,30 @@ -----

You can also use jQuery to animate the transitions by using the animate property. You will need to include the jQuery library and set the animate option to true and it will use the default values for animate (duration=200, easing="swing"). You can also specify your own values and a completion handler. For more details about the jQuery animate property see the [jQuery documentation](http://api.jquery.com/animate/).
This library adds an `ot-layout` className to elements once they have been layed out. This allows you to specify an initial transition for new elements being added like so:
```css
.container > * {
width: 0;
height: 0;
opacity: 0;
}
.container > *.ot-layout {
opacity: 1;
}
```
This will make the elements be size 0x0 with opacity 0 when they are first added. Then when they have the `ot-layout` className added they will grow to the right size and fade in. You can see this effect in the [demo](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo").
Then if you want elements to fade out you can remove the `ot-layout` class from them before removing them from the DOM. Like so:
```javascript
var layout = initLayoutContainer(document.getElementById("layout"), {
animate: {
duration: 500,
easing: "linear",
complete: function() {
console.log('finished moving ' + this);
}
}
session.on('streamDestroyed', (event) => {
event.preventDefault();
session.getSubscribersForStream(event.stream).forEach((subscriber) => {
subscriber.element.classList.remove('ot-layout');
setTimeout(() => {
subscriber.destroy();
layout();
}, 200);
});
});

@@ -184,0 +199,0 @@ ```

7

tests/unit/opentok-layout-spec.js

@@ -65,2 +65,9 @@ /*globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */

it('adds the "ot-layout" class to elements', function() {
var layoutContainer = initLayoutContainer(layoutDiv);
layoutContainer.layout();
expect(div1.classList.contains('ot-layout')).toBe(true);
expect(div2.classList.contains('ot-layout')).toBe(true);
});
it('maintains multiple aspect ratios if you set fixedRatio:true', function () {

@@ -67,0 +74,0 @@ div1.videoWidth = 640;

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc