UNPKG

@tsocial/tvweb-sdk

Version:

TV Web SDK - The Standalone SDK

86 lines (81 loc) 13.8 kB
import{o as e,P as t,j as n,B as o,r as r,V as i,aT as a,a0 as u,e as l,c as s,z as c,b as d,n as p,aU as f}from"./chunk-554942c8.js";let h=e.table` width: 100%; height: 100%; td { text-align: center; vertical-align: middle; padding: 0; border: 0; } border-spacing: 0; table-layout: auto; border-collapse: collapse; `,v=e.div` position: relative; `,m=Array.from([,,,].keys()),g=Array.from([,,,].keys());function y(e){let{children:t,x:o,y:r,width:i,height:a,className:u,surroundStyle:l}=e;return n.jsx(h,{className:u,children:n.jsx("tbody",{children:m.map((e,u)=>n.jsx("tr",{style:{height:0===u?r:"auto"},"data-testid":"row",children:g.map((e,r)=>{let s=1===u&&1===r,c="auto";return s?c=i:0===r&&(c=o),n.jsx("td",{"data-testid":s?"centeredCell":"cell",style:{width:c,height:s?a:"auto",...!s?l:{}},children:s?n.jsx(v,{style:{width:c,height:a},children:t}):null},e)})},e))})})}y.propTypes={children:t.node,x:t.string,y:t.string,width:t.string,height:t.string,className:t.string,surroundStyle:t.object},y.defaultProps={children:null,x:"auto",y:"auto",width:"auto",height:"auto",className:"",surroundStyle:{}};let b=e(y)` background: transparent; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: ${o+10}; `;function w(){return(w=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var x=function(e,t){void 0===t&&(t=!0),r.useEffect(function(){if(t){var n=function(t){"Escape"===t.key&&e(t)};return document.addEventListener("keyup",n),function(){t&&document.removeEventListener("keyup",n)}}},[e,t])},E=function(e,t){void 0===t&&(t=!0),r.useEffect(function(){if(t){var n=function(){e()};return window.addEventListener("resize",n),function(){t&&window.removeEventListener("resize",n)}}},[e,t])},k=function(e,t,n){void 0===n&&(n=!0),r.useEffect(function(){if(n){var o=function(n){var o=Array.isArray(e)?e:[e],r=!1;o.forEach(function(e){if(!e.current||e.current.contains(n.target)){r=!0;return}}),n.stopPropagation(),r||t(n)};return document.addEventListener("mousedown",o),document.addEventListener("touchstart",o),function(){n&&(document.removeEventListener("mousedown",o),document.removeEventListener("touchstart",o))}}},[e,t,n])},O=function(e,t){void 0===t&&(t=!0),r.useEffect(function(){if(t){var n=function(t){if(9===t.keyCode){var n,o=null==e||null==(n=e.current)?void 0:n.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'),r=Array.prototype.slice.call(o);if(1===r.length)return void t.preventDefault();var i=r[0],a=r[r.length-1];t.shiftKey&&document.activeElement===i?(t.preventDefault(),a.focus()):document.activeElement===a&&(t.preventDefault(),i.focus())}};return document.addEventListener("keydown",n),function(){t&&document.removeEventListener("keydown",n)}}},[e,t])},T="undefined"!=typeof window?r.useLayoutEffect:r.useEffect,j={tooltip:{position:"absolute",zIndex:999},modal:{position:"relative",margin:"auto"}},C={height:"8px",width:"16px",position:"absolute",background:"transparent",color:"#FFF",zIndex:-1},S={tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",zIndex:999},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",display:"flex",zIndex:999}},A=["top left","top center","top right","right top","right center","right bottom","bottom left","bottom center","bottom right","left top","left center","left bottom"],L=function(e,t,n,o,r){var i=r.offsetX,a=r.offsetY,u=8*!!o,l=n.split(" "),s=e.top+e.height/2,c=e.left+e.width/2,d=t.height,p=t.width,f=s-d/2,h=c-p/2,v="",m="0%",g="0%";switch(l[0]){case"top":f-=d/2+e.height/2+u,v="rotate(180deg) translateX(50%)",m="100%",g="50%";break;case"bottom":f+=d/2+e.height/2+u,v="rotate(0deg) translateY(-100%) translateX(-50%)",g="50%";break;case"left":h-=p/2+e.width/2+u,v=" rotate(90deg) translateY(50%) translateX(-25%)",g="100%",m="50%";break;case"right":h+=p/2+e.width/2+u,v="rotate(-90deg) translateY(-150%) translateX(25%)",m="50%"}switch(l[1]){case"top":f=e.top,m=e.height/2+"px";break;case"bottom":f=e.top-d+e.height,m=d-e.height/2+"px";break;case"left":h=e.left,g=e.width/2+"px";break;case"right":h=e.left-p+e.width,g=p-e.width/2+"px"}return f="top"===l[0]?f-a:f+a,{top:f,left:h="left"===l[0]?h-i:h+i,transform:v,arrowLeft:g,arrowTop:m}},P=function(e){var t={top:0,left:0,width:window.innerWidth,height:window.innerHeight};if("string"==typeof e){var n=document.querySelector(e);null!==n&&(t=n.getBoundingClientRect())}return t},R=function(e,t,n,o,r,i){var a=r.offsetX,u=r.offsetY,l={arrowLeft:"0%",arrowTop:"0%",left:0,top:0,transform:"rotate(135deg)"},s=0,c=P(i),d=Array.isArray(n)?n:[n];for((i||Array.isArray(n))&&(d=[].concat(d,A));s<d.length;){var p={top:(l=L(e,t,d[s],o,{offsetX:a,offsetY:u})).top,left:l.left,width:t.width,height:t.height};if(p.top<=c.top||p.left<=c.left||p.top+p.height>=c.top+c.height||p.left+p.width>=c.left+c.width)s++;else break}return l},D=0,z=function(){var e=document.getElementById("popup-root");return null===e&&((e=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(e)),e},N=r.forwardRef(function(e,t){var n=e.trigger,o=void 0===n?null:n,u=e.onOpen,l=void 0===u?function(){}:u,s=e.onClose,c=void 0===s?function(){}:s,d=e.defaultOpen,p=e.open,f=void 0===p?void 0:p,h=e.disabled,v=void 0!==h&&h,m=e.nested,g=void 0!==m&&m,y=e.closeOnDocumentClick,b=void 0===y||y,A=e.repositionOnResize,L=e.closeOnEscape,P=e.on,N=void 0===P?["click"]:P,$=e.contentStyle,I=void 0===$?{}:$,M=e.arrowStyle,X=void 0===M?{}:M,B=e.overlayStyle,Y=e.className,F=void 0===Y?"":Y,K=e.position,H=void 0===K?"bottom center":K,W=e.modal,q=void 0!==W&&W,_=e.lockScroll,V=void 0!==_&&_,U=e.arrow,G=void 0===U||U,J=e.offsetX,Q=void 0===J?0:J,Z=e.offsetY,ee=void 0===Z?0:Z,et=e.mouseEnterDelay,en=void 0===et?100:et,eo=e.mouseLeaveDelay,er=void 0===eo?100:eo,ei=e.keepTooltipInside,ea=void 0!==ei&&ei,eu=e.children,el=r.useState(f||void 0!==d&&d),es=el[0],ec=el[1],ed=r.useRef(null),ep=r.useRef(null),ef=r.useRef(null),eh=r.useRef(null),ev=r.useRef("popup-"+ ++D),em=!!q||!o,eg=r.useRef(0);T(function(){return es?(eh.current=document.activeElement,eC(),ej(),eO()):eT(),function(){clearTimeout(eg.current)}},[es]),r.useEffect(function(){"boolean"==typeof f&&(f?ey():eb())},[f,v]);var ey=function(e){es||v||(ec(!0),setTimeout(function(){return l(e)},0))},eb=function(e){var t;es&&!v&&(ec(!1),em&&(null==(t=eh.current)||t.focus()),setTimeout(function(){return c(e)},0))},ew=function(e){null==e||e.stopPropagation(),es?eb(e):ey(e)},ex=function(e){clearTimeout(eg.current),eg.current=setTimeout(function(){return ey(e)},en)},eE=function(e){null==e||e.preventDefault(),ew()},ek=function(e){clearTimeout(eg.current),eg.current=setTimeout(function(){return eb(e)},er)},eO=function(){em&&V&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},eT=function(){em&&V&&(document.getElementsByTagName("body")[0].style.overflow="auto")},ej=function(){var e,t=null==ep||null==(e=ep.current)?void 0:e.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'),n=Array.prototype.slice.call(t)[0];null==n||n.focus()};r.useImperativeHandle(t,function(){return{open:function(){ey()},close:function(){eb()},toggle:function(){ew()}}});var eC=function(){if(!em&&es){if((null==ed?void 0:ed.current)&&(null==ed?void 0:ed.current)&&(null==ep?void 0:ep.current)){var e,t,n=R(ed.current.getBoundingClientRect(),ep.current.getBoundingClientRect(),H,G,{offsetX:Q,offsetY:ee},ea);ep.current.style.top=n.top+window.scrollY+"px",ep.current.style.left=n.left+window.scrollX+"px",G&&ef.current&&(ef.current.style.transform=n.transform,ef.current.style.setProperty("-ms-transform",n.transform),ef.current.style.setProperty("-webkit-transform",n.transform),ef.current.style.top=(null==(e=X.top)?void 0:e.toString())||n.arrowTop,ef.current.style.left=(null==(t=X.left)?void 0:t.toString())||n.arrowLeft)}}};x(eb,void 0===L||L),O(ep,es&&em),E(eC,void 0===A||A),k(o?[ep,ed]:[ep],eb,b&&!g);var eS=function(){var e=em?j.modal:j.tooltip,t={className:"popup-content "+(""!==F?F.split(" ").map(function(e){return e+"-content"}).join(" "):""),style:w({},e,I,{pointerEvents:"auto"}),ref:ep,onClick:function(e){e.stopPropagation()}};return!q&&N.indexOf("hover")>=0&&(t.onMouseEnter=ex,t.onMouseLeave=ek),t},eA=function(){return i.createElement("div",Object.assign({},eS(),{key:"C",role:em?"dialog":"tooltip",id:ev.current}),G&&!em&&i.createElement("div",{ref:ef,style:C},i.createElement("svg",{"data-testid":"arrow",className:"popup-arrow "+(""!==F?F.split(" ").map(function(e){return e+"-arrow"}).join(" "):""),viewBox:"0 0 32 16",style:w({position:"absolute"},X)},i.createElement("path",{d:"M16 0l16 16H0z",fill:"currentcolor"}))),eu&&"function"==typeof eu?eu(eb,es):eu)},eL=!(N.indexOf("hover")>=0),eP=em?S.modal:S.tooltip,eR=[eL&&i.createElement("div",{key:"O","data-testid":"overlay","data-popup":em?"modal":"tooltip",className:"popup-overlay "+(""!==F?F.split(" ").map(function(e){return e+"-overlay"}).join(" "):""),style:w({},eP,void 0===B?{}:B,{pointerEvents:b&&g||em?"auto":"none"}),onClick:b&&g?eb:void 0,tabIndex:-1},em&&eA()),!em&&eA()];return i.createElement(i.Fragment,null,function(){for(var e={key:"T",ref:ed,"aria-describedby":ev.current},t=Array.isArray(N)?N:[N],n=0,r=t.length;n<r;n++)switch(t[n]){case"click":e.onClick=ew;break;case"right-click":e.onContextMenu=eE;break;case"hover":e.onMouseEnter=ex,e.onMouseLeave=ek;break;case"focus":e.onFocus=ex,e.onBlur=ek}if("function"==typeof o){var a=o(es);return!!o&&i.cloneElement(a,e)}return!!o&&i.cloneElement(o,e)}(),es&&a.createPortal(eR,z()))});let $=u` .popup-content { margin: auto; width: 100%; max-width: 568px; background-color: ${l("popup.backgroundColor")}; padding: ${l("popup.padding")}; border: ${l("popup.border")}; border-radius: ${l("popup.borderRadius")}; } [role=tooltip].popup-content { width: 200px; box-shadow: 0 0 3px rgba(0, 0, 0, .16); background-color: ${l("popup.backgroundColor")}; padding: ${l("popup.padding")}; border: ${l("popup.border")}; border-radius: ${l("popup.borderRadius")}; } .popup-overlay { padding: 10px; background: ${l("popup.overlay.backgroundColor")}; } [data-popup=tooltip].popup-overlay { background: transparent } .popup-arrow { -webkit-filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, .16)); filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, .16)); color: #fff; stroke-width: 2px; stroke: #d7d7d7; stroke-dasharray: 30px; stroke-dashoffset: -54px; left: 0; right: 0; top: 0; bottom: 0 } `,I=o+1e3,M=({open:e=!1,children:t=null,overlayStyle:o={},...r})=>e?n.jsxs(n.Fragment,{children:[n.jsx(N,{overlayStyle:{...o,zIndex:I},closeOnDocumentClick:!1,closeOnEscape:!1,modal:!0,open:e,...r,children:t}),n.jsx($,{})]}):null,X=e.div` font-size: 18px; text-align: center; padding: 10px; `,B=({contentStyle:e={}})=>{let{lang:t,warmupMessage:o}=s.useSDKSettings(),r=c(),i=o?o?.[t]:r("warmup_intro");return n.jsx(M,{open:!0,contentStyle:e,children:n.jsx(X,{className:"warmup-message",children:i})})},Y={LANDSCAPE:"landscape",PORTRAIT:"portrait",DESKTOP:"desktop"},F=e=>{let t=r.useRef(window.matchMedia("(orientation: portrait)")),n=r.useRef(t.current.matches?Y.PORTRAIT:Y.LANDSCAPE),[o,i]=r.useState(n.current);return r.useEffect(()=>{function o(){let t=p(screen,"orientation.type")?.split("-")?.[0];i(t),"function"==typeof e&&e(t,n.current)}function r(t){let o;i(o=t.matches?Y.PORTRAIT:Y.LANDSCAPE),"function"==typeof e&&e(o,n.current)}return screen.orientation?screen.orientation.addEventListener("change",o):t.current.addEventListener("change",r),()=>{screen.orientation?screen.orientation.removeEventListener("change",o):t.current.removeEventListener("change",r)}},[e]),d.isMobile?{curOrientation:o,initOrientation:n.current}:{curOrientation:Y.DESKTOP,initOrientation:Y.DESKTOP}},K=e.div` text-align: center; font-size: 20px; font-weight: 600; `,H=e.div` width: 100%; height: 100%; opacity: ${({$showChildren:e})=>+!!e}; `;function W({onOrientationChange:e=f,unmountOnHidden:t=!1,remountDelayMs:o=500,children:i}){let a=c(),{curOrientation:u,initOrientation:l}=F(e),s=u===l||u===Y.DESKTOP,d=function({isVisible:e,enableDelay:t,delayMs:n=500}){let[o,i]=r.useState(e),a=r.useRef(e),u=r.useRef(null);return r.useEffect(()=>{let o=a.current;if(!t){i(e),a.current=e;return}let r=!o&&e,l=o&&!e;return r?u.current=setTimeout(()=>{i(!0)},n):l&&(u.current&&(clearTimeout(u.current),u.current=null),i(!1)),a.current=e,()=>{u.current&&clearTimeout(u.current)}},[e,t,n]),o}({isVisible:s,enableDelay:t,delayMs:o});return n.jsxs(n.Fragment,{children:[u!==l&&n.jsx(M,{open:!0,children:n.jsx(K,{children:a("wrong_orientation")})}),(!t||d)&&n.jsx(H,{$showChildren:s,children:i})]})}let q=e.div` text-align: center; font-size: 20px; font-weight: 600; `,_=e.div` width: 100%; height: 100%; opacity: ${({showChildren:e})=>+!!e}; `;function V({onOrientationChange:e,unmountOnHidden:t,children:o}){let r=c(),{curOrientation:i,initOrientation:a}=F(e),u=i===a||i===Y.DESKTOP;return n.jsxs(n.Fragment,{children:[i!==a&&n.jsx(M,{open:!0,children:n.jsx(q,{children:r("wrong_orientation")})}),(!t||u)&&n.jsx(_,{showChildren:u,children:o})]})}function U({version:e="v1",children:t,...o}){return"v2"===e?n.jsx(W,{...o,children:t}):n.jsx(V,{...o,children:t})}V.defaultProps={onOrientationChange:()=>{},unmountOnHidden:!1},V.propTypes={onOrientationChange:t.func,unmountOnHidden:t.bool};export{b as C,Y as M,U as O,M as P,B as W};