@streamlayer/react 1.20.5 → 1.20.6

package/lib/cjs/pause-ad.js

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