UNPKG

voluptatequisquam

Version:

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.

12 lines 8.57 kB
!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.initLayoutContainer=i():t.initLayoutContainer=i()}("undefined"!=typeof self?self:this,function(){return function(t){var i={};function e(o){if(i[o])return i[o].exports;var n=i[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,o){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(o,n,function(i){return t[i]}.bind(null,n));return o},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=2)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,h=void 0,f=void 0,s=void 0,l=void 0,u=void 0,c=void 0,g=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(g=(c=Math.floor(o/p))/(u=Math.floor(e/m)))>i?c=u*(g=i):g<t&&(u=c/(g=t));var x=(u=Math.min(r,u))*(c=Math.min(a,c))*n;(void 0===d||x>=d)&&(d=x,s=c,l=u,h=m,f=p)}return{maxArea:d,targetCols:h,targetRows:f,targetHeight:s,targetWidth:l,ratio:s/l}},n=function(t,i){var e=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,h=t.offsetLeft,f=void 0===h?0:h,s=t.offsetTop,l=void 0===s?0:s,u=t.alignItems,c=void 0===u?"center":u,g=t.maxWidth,v=void 0===g?1/0:g,m=t.maxHeight,p=void 0===m?1/0:m,x=t.scaleLastRow,b=void 0===x||x,y=i.map(function(t){return t.height/t.width}),w=y.length,R=void 0;if(r){var H=y.length>0?y[0]:null;R=o(H,H,a,d,w,v,p)}else R=o(n,e,a,d,w,v,p);for(var W=0,L=0,M=[],T=void 0,S=[],I=0;I<y.length;I+=1){I%R.targetCols==0&&(T={ratios:[],width:0,height:0},M.push(T));var O=y[I];T.ratios.push(O);var j=R.targetWidth,_=R.targetHeight;r&&(j=_/O),T.width+=j,T.height=_}for(var A=0,C=0,P=0;P<M.length;P+=1)(T=M[P]).width>a?(T.height=Math.floor(T.height*(a/T.width)),T.width=a):T.width<a&&T.height<p&&(C+=1),A+=T.height;if(b&&A<d&&C>0){var k=d-A;A=0;for(var E=0;E<M.length;E+=1){if((T=M[E]).width<a){var q=k/C;q/T.height>(a-T.width)/T.width&&(q=Math.floor((a-T.width)/T.width*T.height)),T.width+=Math.floor(q/T.height*T.width),T.height+=q,k-=q,C-=1}A+=T.height}}switch(c){case"start":L=0;break;case"end":L=d-A;break;case"center":default:L=(d-A)/2}for(var B=0;B<M.length;B+=1){T=M[B];var N=void 0;switch(c){case"start":N=0;break;case"end":N=a-T.width;break;case"center":default:N=(a-T.width)/2}W=N;for(var F=void 0,$=0;$<T.ratios.length;$+=1){var V=T.ratios[$],z=R.targetWidth;F=T.height,r?z=Math.floor(F/V):F/z!=R.targetHeight/R.targetWidth&&(z=Math.floor(R.targetWidth/R.targetHeight*F)),S.push({left:W+f,top:L+l,width:z,height:F}),W+=z}L+=F}return S};t.exports=function(t,i){var e=t.maxRatio,o=void 0===e?1.5:e,r=t.minRatio,a=void 0===r?9/16:r,d=t.fixedRatio,h=void 0!==d&&d,f=t.bigPercentage,s=void 0===f?.8:f,l=t.bigFixedRatio,u=void 0!==l&&l,c=t.bigMaxRatio,g=void 0===c?1.5:c,v=t.bigMinRatio,m=void 0===v?9/16:v,p=t.bigFirst,x=void 0===p||p,b=t.containerWidth,y=void 0===b?640:b,w=t.containerHeight,R=void 0===w?480:w,H=t.alignItems,W=void 0===H?"center":H,L=t.bigAlignItems,M=void 0===L?"center":L,T=t.smallAlignItems,S=void 0===T?"center":T,I=t.maxWidth,O=void 0===I?1/0:I,j=t.maxHeight,_=void 0===j?1/0:j,A=t.smallMaxWidth,C=void 0===A?1/0:A,P=t.smallMaxHeight,k=void 0===P?1/0:P,E=t.bigMaxWidth,q=void 0===E?1/0:E,B=t.bigMaxHeight,N=void 0===B?1/0:B,F=t.scaleLastRow,$=void 0===F||F,V=t.bigScaleLastRow,z=void 0===V||V,D=R/y,G=0,J=0,K=0,Q=0,U=[],X=i.filter(function(t,i){return!!t.big&&(U.push(i),!0)}),Y=i.filter(function(t){return!t.big}),Z=[],tt=[];if(X.length>0&&Y.length>0){var it=void 0,et=void 0,ot=!0===x;D>function(t){return t.height/t.width}(X[0])?(it=y,K=R-(J=et=Math.floor(R*s)),"column"===x?ot=!1:"row"===x&&(ot=!0)):(et=R,Q=y-(G=it=Math.floor(y*s)),"column"===x?ot=!0:"row"===x&&(ot=!1)),ot?(Z=n({containerWidth:it,containerHeight:et,offsetLeft:0,offsetTop:0,fixedRatio:u,minRatio:m,maxRatio:g,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X),tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:G,offsetTop:J,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k,scaleLastRow:$},Y)):(tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:0,offsetTop:0,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:S,maxWidth:C,maxHeight:k,scaleLastRow:$},Y),Z=n({containerWidth:it,containerHeight:et,offsetLeft:Q,offsetTop:K,fixedRatio:u,minRatio:m,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X))}else X.length>0&&0===Y.length?Z=n({containerWidth:y,containerHeight:R,fixedRatio:u,minRatio:m,maxRatio:g,alignItems:M,maxWidth:q,maxHeight:N,scaleLastRow:z},X):tt=n({containerWidth:y-G,containerHeight:R-J,offsetLeft:G,offsetTop:J,fixedRatio:h,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_,scaleLastRow:$},Y);var nt=[],rt=0,at=0;return i.forEach(function(t,i){U.indexOf(i)>-1?(nt[i]=Z[rt],rt+=1):(nt[i]=tt[at],at+=1)}),nt}},function(t,i,e){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=e(0);t.exports=function(t,i){function e(t,n,r){if(r)return t.style[n]=r,NaN;if("object"===(void 0===n?"undefined":o(n)))return Object.keys(n).forEach(function(i){e(t,i,n[i])}),NaN;var a=(i&&i.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,i){var o=e(t,i);return o?parseInt(o,10):0},a=i.animate,d=void 0!==a&&a,h=i.bigClass,f=void 0===h?"OT_big":h,s=i.ignoreClass,l=void 0===s?"OT_ignore":s;if("none"!==e(t,"display")){var u=t.getAttribute("id");u||(u="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",u)),i.containerHeight=function(t){var i=function(t){return t.offsetHeight>0?t.offsetHeight+"px":e(t,"height")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),i.containerWidth=function(t){var i=function(t){return t.offsetWidth>0?t.offsetWidth+"px":e(t,"width")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var c=Array.prototype.filter.call(t.querySelectorAll("#"+u+">*:not(."+l+")"),function(t){return"none"!==e(t,"display")}),g=c.map(function(t){var i=function(t){if(t){if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth};var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(f),i});n(i,g).forEach(function(t,o){var n=c[o];e(n,"position","absolute");var a=t.width-r(n,"paddingLeft")-r(n,"paddingRight")-r(n,"marginLeft")-r(n,"marginRight")-r(n,"borderLeft")-r(n,"borderRight"),h=t.height-r(n,"paddingTop")-r(n,"paddingBottom")-r(n,"marginTop")-r(n,"marginBottom")-r(n,"borderTop")-r(n,"borderBottom");!function(t,i,o,n,r,a,d){var h=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},s=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&"undefined"!=typeof $?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){s(),a.complete&&a.complete.call(h),d&&d(t,{left:i,top:o,width:n,height:r})})):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout"),d&&d(t,{left:i,top:o,width:n,height:r})),s()}(n,t.left,t.top,a,h,d,i.onLayout)})}}},function(t,i,e){"use strict"; /*! * 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) * */var o=e(0),n=e(1);t.exports=function(t,i){var e=i&&i.window||("undefined"==typeof window?void 0:window);return t="string"==typeof t?e.document.querySelector(t):t,void 0===(e&&e.HTMLElement)||t instanceof e.HTMLElement||i?i||(i={}):i=t,{layout:n.bind(this,t,i),getLayout:o.bind(this,i)}}}])}); //# sourceMappingURL=opentok-layout.min.js.map