forked from aullman/opentok-layout-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
opentok-layout.min.js
11 lines (11 loc) · 3.62 KB
/
opentok-layout.min.js
1
2
3
4
5
6
7
8
9
10
11
/*!
* opentok-layout-js (http://github.com/aullman/opentok-layout-js)
*
* Automatic layout of video elements (publisher and subscriber) minimising
* white-space for the OpenTok on WebRTC API.
*
* @Author: Adam Ullman (http://github.com/aullman)
* @Copyright (c) 2014 Adam Ullman
* @License: Released under the MIT license (http://opensource.org/licenses/MIT)
**/
!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);