@streamlayer/react 1.20.7 → 1.21.0

package/lib/app/pause-ad.d.ts

@@ -10,7 +10,7 @@ import '@streamlayer/sdk-web-interfaces';
 import '@streamlayer/sdk-web-notifications';
 import '@streamlayer/feature-gamification';
 export type StreamLayerPauseAdProps = {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     showPauseAd?: boolean;
     pauseAdVastUrl?: Array<{
         template?: 'default';

package/lib/cjs/pause-ad.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("./provider.js");require("nanostores");const l=require("react");require("@nanostores/react");require("lodash.throttle");require("react-dom");require("react-countup");const C=require("./vast-client.min-B0NUra1B.js"),I={},L=new C.ce,b=s.i(I),j=s.createLogger("ui:gam-static"),E=r=>new Promise((e,o)=>{const t=new Image;t.onload=()=>e(r),t.onerror=()=>o(),t.src=r}),R=()=>{const r=l.useRef(0);return[l.useCallback(async e=>{var o,t,d,u,i,a,p,c,y,f,h;if((o=b.get()[e])!=null&&o.imageSrc)return{success:!0};const v=Date.now();r.current=v,b.setKey(e,{url:e});try{const m=await L.get(e);if(j.debug(m,"parsedVAST"),r.current===v&&b.get()[e].url){const g=m.ads.find(A=>A.creatives.length>0);if(g){j.debug(g,"validAd");const A=g.creatives.find(S=>S.type==="nonlinear");if(A){j.debug(A,"nonlinear");const S=(d=(t=A.variations)==null?void 0:t[0])==null?void 0:d.staticResource,_=(i=(u=A.variations)==null?void 0:u[0])==null?void 0:i.nonlinearClickThroughURLTemplate;if(S)return await E(S),b.setKey(e,{url:e,imageSrc:S,adUrl:_}),{success:!0}}const x=g.creatives.find(S=>S.type==="companion");j.debug(x,"companion");const T=(y=(c=(p=(a=x==null?void 0:x.variations)==null?void 0:a[0])==null?void 0:p.staticResources)==null?void 0:c[0])==null?void 0:y.url,P=(h=(f=x==null?void 0:x.variations)==null?void 0:f[0])==null?void 0:h.companionClickThroughURLTemplate;if(T)return await E(T),b.setKey(e,{url:e,imageSrc:T,adUrl:P}),{success:!0}}}}catch(m){console.error("Error parsing VAST",m)}return{success:!1}},[]),b]},k=s.styled_default("div")({name:"PauseAdOverlay",class:"pw9gih8",propsAsIs:!1}),U=s.styled_default("div")({name:"PauseAdContent",class:"p8lpomy",propsAsIs:!1}),q=s.styled_default("div")({name:"PauseAdGradientRight",class:"pv7u167",propsAsIs:!1}),B=s.styled_default("div")({name:"PauseAdGradientBottom",class:"p1kh2yb0",propsAsIs:!1}),D=s.styled_default("div")({name:"PauseAdTopLeft",class:"pl8f94x",propsAsIs:!1}),K=s.styled_default("h2")({name:"PauseAdTitle",class:"p1m6zmrt",propsAsIs:!1}),M=s.styled_default("p")({name:"PauseAdCaption",class:"pm3vwfa",propsAsIs:!1}),V=s.styled_default("div")({name:"PauseAdBottomLeft",class:"p1tibuhw",propsAsIs:!1}),F=s.styled_default("button")({name:"PauseAdPlayButton",class:"ptqqrqd",propsAsIs:!1}),N=s.styled_default("div")({name:"PauseAdSidebar",class:"p14estxv",propsAsIs:!1}),z=s.styled_default("span")({name:"PauseAdTitleDescription",class:"p1dpvfl1",propsAsIs:!1}),w=s.styled_default("img")({name:"ExternalAdContainer",class:"ezfmabr",propsAsIs:!1}),$=({vastUrl:r})=>{var e;const[,o]=R(),t=s.useStore(o,{keys:[r]});return(e=t==null?void 0:t[r])!=null&&e.imageSrc?t[r].adUrl?n.jsx("a",{href:t[r].adUrl,target:"_blank",rel:"noopener noreferrer",children:n.jsx(w,{src:t[r].imageSrc})}):n.jsx(w,{src:t[r].imageSrc}):null},G=({isClosing:r,title:e,caption:o,onPlay:t,onClose:d,vastUrl:u,options:i})=>{const a=(i==null?void 0:i.showPauseButton)??!0,{ref:p,focusSelf:c}=s.distExports.useFocusable({focusKey:"sl-pause-ad-play",onEnterRelease:t,isFocusBoundary:!0,forceFocus:!0});return l.useEffect(()=>{p.current&&c()},[p,c]),l.useEffect(()=>{const y=f=>{const h=f.keyCode;if(h===461||h===10009||h===27||h===8){f.preventDefault(),f.stopPropagation(),f.stopImmediatePropagation(),d==null||d();return}};return window.addEventListener("keydown",y,{capture:!0}),()=>window.removeEventListener("keydown",y,{capture:!0})},[d]),n.jsx(k,{className:s.cx_default(r&&"pause-ad-closing"),children:n.jsxs(U,{children:[n.jsx(q,{}),n.jsx(B,{}),n.jsxs(D,{children:[n.jsx(K,{children:e}),n.jsx(M,{children:o})]}),a&&n.jsx(V,{children:n.jsx(F,{ref:p,onClick:t,onMouseEnter:()=>p.current.focus(),"aria-label":"Resume playback"})}),n.jsxs(N,{children:[u&&n.jsx($,{vastUrl:u}),n.jsx(z,{children:"ADVERTISEMENT"})]})]})})},O=({showPauseAd:r,vastUrls:e,title:o,caption:t,onPlay:d,onClose:u,onRender:i,options:a})=>{const p=(a==null?void 0:a.pauseAdDelay)??5e3,[c,y]=l.useState(!1),[f,h]=l.useState(!1),v=l.useRef(),m=e==null?void 0:e[0].url,g=l.useRef(m);g.current=m;const[A,x]=R();return l.useEffect(()=>{if(r&&m){s.eventBus.emit("exposedPauseAd",{action:"enabled",payload:{}}),A(m).then(P=>{g.current===m&&(P==null?void 0:P.success)!==!0&&(clearTimeout(v.current),u==null||u())}).catch(()=>{g.current===m&&(clearTimeout(v.current),u==null||u())});const T=()=>{var P;(P=x.get()[g.current])!=null&&P.imageSrc?(clearTimeout(v.current),h(!1),y(!0),s.eventBus.emit("exposedPauseAd",{action:"rendered",payload:{}})):v.current=setTimeout(()=>{T()},200)};v.current=setTimeout(()=>{T()},p)}else s.eventBus.emit("exposedPauseAd",{action:"disabled",payload:{}}),h(!0),v.current=setTimeout(()=>{y(!1)},400);return()=>{v.current&&clearTimeout(v.current)}},[x,A,u,p,r,m]),l.useEffect(()=>{i==null||i({rendered:c})},[c,i]),l.useEffect(()=>()=>{i==null||i({rendered:!1})},[i]),c?n.jsx(G,{onClose:u,isClosing:f,title:o,caption:t,onPlay:d,vastUrl:m,options:a}):null},H=({showPauseAd:r,pauseAdVastUrl:e,videoPlayerController:o,onRenderPauseAd:t,onClosePauseAd:d,children:u,options:i})=>{const a=s.useStreamLayer(),p=s.useStreamLayerTheme(),c=l.useRef(),y=l.useCallback(()=>{d==null||d()},[d]),f=l.useCallback(()=>{a==null||a.controlVideoPlayer({play:!0})},[a]);return l.useEffect(()=>a?(o&&(c.current=o,a.addVideoPlayerController(c.current)),()=>{c.current&&a.removeVideoPlayerController(c.current)}):()=>{},[a,o]),a?n.jsx("div",{className:"StreamLayerSDK",children:n.jsxs(s.h,{style:{position:"relative"},customTheme:p.theme,themeMode:p.themeMode,children:[u,e&&n.jsx(O,{showPauseAd:r,vastUrls:e,onClose:y,onRender:t,onPlay:f,options:i})]})}):u};class J extends l.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,o){console.error(e,o.componentStack)}render(){return this.state.hasError?this.props.children:n.jsx(H,{...this.props})}}exports.StreamLayerPauseAd=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("./provider.js");require("nanostores");const i=require("react");require("@nanostores/react");require("lodash.throttle");require("react-dom");require("react-countup");const B=require("./vast-client.min-B0NUra1B.js"),_={},I=new B.ce,T=e.i(_),E=e.createLogger("ui:gam-static"),w=s=>new Promise((t,a)=>{const l=new Image;l.onload=()=>t(s),l.onerror=()=>a(),l.src=s}),R=()=>{const s=i.useRef(0);return[i.useCallback(async t=>{var a,l,r,p,c,u,y,d,h,x,A;if((a=T.get()[t])!=null&&a.imageSrc)return{success:!0};const v=Date.now();s.current=v,T.setKey(t,{id:"",url:t});try{e.eventBus.emit("exposedPauseAd",{action:"load",payload:{}});const m=await I.get(t);if(E.debug(m,"parsedVAST"),s.current===v&&T.get()[t].url){const o=m.ads.find(f=>f.creatives.length>0);if(o){E.debug(o,"validAd");const f=o.creatives.find(g=>g.type==="nonlinear");if(f){E.debug(f,"nonlinear");const g=(r=(l=f.variations)==null?void 0:l[0])==null?void 0:r.staticResource,j=(c=(p=f.variations)==null?void 0:p[0])==null?void 0:c.nonlinearClickThroughURLTemplate;if(g)return await w(g),T.setKey(t,{id:o.id||"",url:t,imageSrc:g,adUrl:j}),e.eventBus.emit("exposedPauseAd",{action:"loaded",payload:{id:o.id||""}}),{success:!0}}const P=o.creatives.find(g=>g.type==="companion");E.debug(P,"companion");const k=(h=(d=(y=(u=P==null?void 0:P.variations)==null?void 0:u[0])==null?void 0:y.staticResources)==null?void 0:d[0])==null?void 0:h.url,S=(A=(x=P==null?void 0:P.variations)==null?void 0:x[0])==null?void 0:A.companionClickThroughURLTemplate;if(k)return await w(k),T.setKey(t,{id:o.id||"",url:t,imageSrc:k,adUrl:S}),e.eventBus.emit("exposedPauseAd",{action:"loaded",payload:{id:o.id||""}}),{success:!0}}}}catch(m){console.error("Error parsing VAST",m)}return{success:!1}},[]),T]},L=e.styled_default("div")({name:"PauseAdOverlay",class:"pw9gih8",propsAsIs:!1}),D=e.styled_default("div")({name:"PauseAdContent",class:"p8lpomy",propsAsIs:!1}),q=e.styled_default("div")({name:"PauseAdGradientRight",class:"pv7u167",propsAsIs:!1}),U=e.styled_default("div")({name:"PauseAdGradientBottom",class:"p1kh2yb0",propsAsIs:!1}),V=e.styled_default("div")({name:"PauseAdTopLeft",class:"pl8f94x",propsAsIs:!1}),K=e.styled_default("h2")({name:"PauseAdTitle",class:"p1m6zmrt",propsAsIs:!1}),M=e.styled_default("p")({name:"PauseAdCaption",class:"pm3vwfa",propsAsIs:!1}),F=e.styled_default("div")({name:"PauseAdBottomLeft",class:"p1tibuhw",propsAsIs:!1}),N=e.styled_default("button")({name:"PauseAdPlayButton",class:"ptqqrqd",propsAsIs:!1}),G=e.styled_default("div")({name:"PauseAdSidebar",class:"p14estxv",propsAsIs:!1}),O=e.styled_default("span")({name:"PauseAdTitleDescription",class:"p1dpvfl1",propsAsIs:!1}),C=e.styled_default("img")({name:"ExternalAdContainer",class:"ezfmabr",propsAsIs:!1}),z=({vastUrl:s,isDesktop:t})=>{var a;const[,l]=R(),r=e.useStore(l,{keys:[s]});return i.useEffect(()=>{r&&r[s]&&r[s].imageSrc&&r[s].id&&e.eventBus.emit("exposedPauseAd",{action:"rendered",payload:{id:r[s].id}})},[r,s]),(a=r==null?void 0:r[s])!=null&&a.imageSrc?!r[s].adUrl||!t?n.jsx(C,{src:r[s].imageSrc}):n.jsx("a",{onClick:()=>{e.eventBus.emit("exposedPauseAd",{action:"navigated",payload:{id:r[s].id}})},href:r[s].adUrl,target:"_blank",rel:"noopener noreferrer",children:n.jsx(C,{src:r[s].imageSrc})}):null},$=({isClosing:s,title:t,caption:a,onPlay:l,onClose:r,vastUrl:p,options:c,isDesktop:u})=>{const y=(c==null?void 0:c.showPauseButton)??!0,{ref:d,focusSelf:h}=e.distExports.useFocusable({focusKey:"sl-pause-ad-play",onEnterRelease:l,isFocusBoundary:!0,forceFocus:!0});return i.useEffect(()=>{d.current&&h()},[d,h]),i.useEffect(()=>{if(!r)return()=>{};const x=A=>{const v=A.keyCode;if(v===461||v===10009||v===27||v===8){A.preventDefault(),A.stopPropagation(),A.stopImmediatePropagation(),r();return}};return window.addEventListener("keydown",x,{capture:!0}),()=>window.removeEventListener("keydown",x,{capture:!0})},[r]),n.jsx(L,{className:e.cx_default("SL_PauseAdOverlay",s&&"pause-ad-closing"),children:n.jsxs(D,{children:[n.jsx(q,{}),n.jsx(U,{}),n.jsxs(V,{children:[n.jsx(K,{children:t}),n.jsx(M,{children:a})]}),y&&n.jsx(F,{children:n.jsx(N,{ref:d,onClick:l,onMouseEnter:()=>d.current.focus(),"aria-label":"Resume playback"})}),n.jsxs(G,{children:[p&&n.jsx(z,{isDesktop:u,vastUrl:p}),n.jsx(O,{children:"ADVERTISEMENT"})]})]})})},W=({showPauseAd:s,vastUrls:t,title:a,caption:l,sdk:r,onClose:p,onRender:c,options:u,isDesktop:y})=>{const d=(u==null?void 0:u.pauseAdDelay)??5e3,[h,x]=i.useState(!1),[A,v]=i.useState(!1),m=i.useRef(),o=t==null?void 0:t[0].url,f=i.useRef(o);f.current=o;const[P,k]=R(),S=i.useCallback(()=>{p&&(e.eventBus.emit("exposedPauseAd",{action:"closed",payload:{}}),p())},[p]),g=i.useCallback(()=>{r.controlVideoPlayer({play:!0})},[r]);return i.useEffect(()=>{if(s&&o){e.eventBus.emit("exposedPauseAd",{action:"enabled",payload:{}}),P(o).then(b=>{f.current===o&&(b==null?void 0:b.success)!==!0&&(clearTimeout(m.current),S==null||S())}).catch(()=>{f.current===o&&(clearTimeout(m.current),S==null||S())});const j=()=>{const b=k.get()[f.current];b!=null&&b.imageSrc?(clearTimeout(m.current),v(!1),x(!0)):m.current=setTimeout(()=>{j()},200)};m.current=setTimeout(()=>{j()},d)}else e.eventBus.emit("exposedPauseAd",{action:"disabled",payload:{}}),v(!0),m.current=setTimeout(()=>{x(!1)},400);return()=>{m.current&&clearTimeout(m.current)}},[k,P,S,d,s,o]),i.useEffect(()=>{c==null||c({rendered:h})},[h,c]),i.useEffect(()=>()=>{c==null||c({rendered:!1})},[c]),h?n.jsx($,{onClose:S,isClosing:A,title:a,caption:l,onPlay:g,vastUrl:o,options:u,isDesktop:y}):null},X=({showPauseAd:s,pauseAdVastUrl:t,videoPlayerController:a,onRenderPauseAd:l,onClosePauseAd:r,children:p,options:c})=>{const u=e.useStreamLayer(),y=e.useStreamLayerTheme(),d=i.useRef();return i.useEffect(()=>u?(a&&(d.current=a,u.addVideoPlayerController(d.current)),()=>{d.current&&u.removeVideoPlayerController(d.current)}):()=>{},[u,a]),u?n.jsx("div",{className:"StreamLayerSDK",children:n.jsxs(e.h,{style:p?{position:"relative"}:{},customTheme:y.theme,themeMode:y.themeMode,children:[p,t&&n.jsx(W,{sdk:u,showPauseAd:s,vastUrls:t,onClose:r,onRender:l,options:c,isDesktop:!0})]})}):p};class H extends i.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t,a){console.error(t,a.componentStack)}render(){return this.state.hasError?this.props.children:n.jsx(X,{...this.props})}}exports.StreamLayerPauseAd=H;