@streamlayer/react 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/advertisement.d.ts +6 -1
- package/lib/cjs/advertisement.js +1 -0
- package/lib/cjs/app.js +1 -1
- package/lib/cjs/index2.js +43 -40
- package/lib/cjs/masters2.js +4 -4
- package/lib/cjs/points.js +1 -1
- package/lib/cjs/useStreamLayerApp2.js +7 -7
- package/lib/dist/cjs/masters.js +48 -45
- package/lib/dist/es/masters.js +2155 -2133
- package/lib/dist/index.d.ts +7 -2
- package/lib/dist/style.css +1 -1
- package/lib/es/advertisement.js +302 -0
- package/lib/es/app.js +16 -15
- package/lib/es/index2.js +2079 -2056
- package/lib/es/masters2.js +1 -1
- package/lib/es/points.js +9 -9
- package/lib/es/useStreamLayerApp2.js +13 -11
- package/lib/style.css +1 -1
- package/package.json +13 -13
|
@@ -1 +1,6 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type StreamLayerSDKAdvertisementProps = {
|
|
2
|
+
event?: string;
|
|
3
|
+
sidebar?: 'left' | 'right';
|
|
4
|
+
banner?: 'top' | 'bottom';
|
|
5
|
+
};
|
|
6
|
+
export declare const StreamLayerSDKAdvertisement: React.FC<StreamLayerSDKAdvertisementProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("react"),o=require("./index2.js"),m=require("./app.js"),r=require("./useStreamLayerApp2.js"),q=o.styled_default("div")({name:"Container",class:"c5b6wdg",propsAsIs:!1}),R="a1rlj479",D="s35f1di",G="sj4471g",w="b12050d8",O="b1d5ybek",U=e=>e==="left"||e==="right"?D:w,F=e=>e==="left"||e==="right"?G:O,K=e=>e==="left"?"avdxyl3":e==="right"?"a1bisd08":e==="top"?"a1u9y2aj":"a1qqaks",N=({children:e,style:t,className:a,enabled:n=!0,hiding:l,direction:d="left",onAnimationEnd:i})=>s.jsx(q,{style:t,className:o.cx_default(a,R,K(d),n&&!l&&U(d),n&&l&&F(d)),onAnimationEnd:i,children:e}),z=o.styled_default("div")({name:"BannerContainer",class:"bipmch2",propsAsIs:!1}),H=o.styled_default("img")({name:"BannerImg",class:"bpkcihp",propsAsIs:!1}),W=({promotion:e,hiding:t,direction:a="bottom"})=>{var n;return(n=e.additionalBanner)!=null&&n.imageUrl?s.jsx(N,{direction:a,hiding:t,children:s.jsx(z,{children:s.jsx(H,{src:e.additionalBanner.imageUrl,alt:"promo"})})}):null},J=o.styled_default("div")({name:"Header",class:"hkzhq2w",propsAsIs:!1}),Q=o.styled_default("div")({name:"HeaderContent",class:"hmgz5i",propsAsIs:!1}),T=o.styled_default("img")({name:"SponsorLogo",class:"syxi3jt",propsAsIs:!1}),V=o.styled_default("div")({name:"SponsorName",class:"s149e3gp",propsAsIs:!1}),X=o.styled_default("div")({name:"PromoOverlay",class:"p10toh7",propsAsIs:!1}),Y=o.styled_default("div")({name:"Media",class:"m1jyea6t",propsAsIs:!1}),Z=o.styled_default("div")({name:"Text",class:"tzpfa3h",propsAsIs:!1}),ee=o.styled_default("div")({name:"Description",class:"d1crmu01",propsAsIs:!1}),se=o.styled_default("div")({name:"SponsorText",class:"s1l37r8s",propsAsIs:!1}),oe=o.styled_default("div")({name:"ADLogo",class:"a1nmch9k",propsAsIs:!1}),ne=o.styled_default("span")({name:"SponsoredText",class:"s1er0ljd",propsAsIs:!1}),le=o.styled_default("div")({name:"CloseIconWrap",class:"cydopmr",propsAsIs:!1}),te=()=>o.c1,ae=o.styled_default(te())({name:"CloseIcon",class:"c1w6nt04",propsAsIs:!0}),de=o.styled_default("div")({name:"Content",class:"c1evcmtq",propsAsIs:!1}),re=o.styled_default("div")({name:"ActionBtnWrap",class:"awodx0x",propsAsIs:!1}),ie=o.styled_default("a")({name:"ActionButton",class:"a1q3n6oi",propsAsIs:!1}),ce=o.styled_default("img")({name:"PromoImg",class:"p8d4xfk",propsAsIs:!1}),ue=o.styled_default("div")({name:"Title",class:"tt6oobh",propsAsIs:!1}),P=({promotion:e,onClose:t,inSidebar:a})=>{var n,l,d,i,c,y,v,h,g,x,b,A,f,j,I,_,S,$,M,L,k,B,C,E;const u=e.type===r.PromotionType.INGAME_IAB11_LBAR||e.type===r.PromotionType.INGAME_IAB11;return s.jsxs(X,{className:"PromoOverlay",style:{...a?{}:{backgroundColor:"#1E3344"}},children:[s.jsxs(J,{children:[s.jsxs(Q,{children:[((n=e.sponsor)==null?void 0:n.logo)&&e.logoMode===r.PromotionLogoMode.LEFT&&s.jsx(T,{src:(l=e.sponsor)==null?void 0:l.logo,alt:"promo"}),s.jsxs("div",{style:{paddingLeft:(d=e.sponsor)!=null&&d.logo&&e.logoMode===r.PromotionLogoMode.LEFT?"0px":"8px"},children:[((i=e.sponsor)==null?void 0:i.logo)&&e.logoMode===r.PromotionLogoMode.LEFT&&s.jsx(V,{children:(c=e.sponsor)==null?void 0:c.name}),s.jsxs(se,{children:[s.jsx(oe,{children:"AD"}),s.jsx(ne,{children:"SPONSORED"})]})]})]}),s.jsx(le,{onClick:t,children:s.jsx(ae,{name:"icon-cross"})})]}),s.jsxs(Y,{children:[((y=e.sponsor)==null?void 0:y.logo)&&e.logoMode===r.PromotionLogoMode.CENTER&&s.jsx(T,{src:(v=e.sponsor)==null?void 0:v.logo,alt:"promo"}),s.jsxs(de,{children:[(g=(h=e.banner)==null?void 0:h.video)!=null&&g.url?s.jsx(o.K,{source:(b=(x=e.banner)==null?void 0:x.video)==null?void 0:b.url,poster:(f=(A=e.banner)==null?void 0:A.video)==null?void 0:f.thumbnailUrl,aspectRatio:u?"1/1":"16/9"}):(j=e.banner)!=null&&j.imageUrl?s.jsx(ce,{style:u?{width:"268px",height:"268px"}:{},src:(I=e.banner)==null?void 0:I.imageUrl,alt:"promo"}):null,!u&&s.jsxs(Z,{children:[s.jsx(ue,{children:(_=e.banner)==null?void 0:_.title}),s.jsx(ee,{children:(S=e.banner)==null?void 0:S.body})]})]}),s.jsx(re,{children:s.jsx(ie,{href:($=e.banner)==null?void 0:$.url,style:{backgroundColor:((L=(M=e.banner)==null?void 0:M.ctaButton)==null?void 0:L.color)||"#009dc4",color:((B=(k=e.banner)==null?void 0:k.ctaButton)==null?void 0:B.textColor)||"#fff"},target:"_blank",children:(E=(C=e.banner)==null?void 0:C.ctaButton)==null?void 0:E.label})})]})]})},pe=o.styled_default("div")({name:"SidebarContainer",class:"s1abskp8",propsAsIs:!1}),me=({children:e,direction:t,style:a,className:n,hiding:l})=>s.jsx(N,{direction:t,style:a,hiding:l,className:n,children:s.jsx(pe,{children:e})}),ye=e=>(e==null?void 0:e.type)===r.PromotionType.INGAME_IAB11_LBAR||(e==null?void 0:e.type)===r.PromotionType.INGAME_IAB21_LBAR,ve=e=>(e==null?void 0:e.type)===r.PromotionType.INGAME_IAB11||(e==null?void 0:e.type)===r.PromotionType.INGAME_IAB21,he=({advertisement:e,layoutMode:t="side-by-side",sidebar:a,banner:n})=>{const l=o.useStore(e.data);return!l.data&&l.loading?null:l.error?s.jsxs("div",{children:["error ",s.jsx("button",{onClick:e.close,children:"close"})]}):l.data?!a&&!n&&ve(l.data)?s.jsx(P,{promotion:l.data,onClose:e.close}):a&&ye(l.data)?s.jsx(me,{direction:a,hiding:e.hiding,children:s.jsx(P,{promotion:l.data,onClose:e.close,inSidebar:!0})}):n?s.jsx(W,{hiding:e.hiding,promotion:l.data,direction:n}):null:s.jsxs("div",{children:["empty promo ",s.jsx("button",{onClick:e.close,children:"close"})]})},ge=o.styled_default("div")({name:"AdvertisementUIWrap",class:"aa6pjif",propsAsIs:!1}),xe=e=>{const t=e.target;t instanceof HTMLAnchorElement&&t.target==="_blank"&&t.getAttribute("data-analytics")==="web-link"&&o.eventBus.emit("poll",{action:"navigated",payload:{}})},be=({gamification:e,layoutMode:t,sidebar:a,banner:n})=>{const l=p.useRef(null),d=o.useStore(e.advertisement.$list),i=p.useMemo(()=>e.advertisement.getActiveAdvertisement(),[d]);return o.L(l,{enabled:!!i,event:"click",listener:xe}),i?s.jsx(ge,{ref:l,style:{height:!n&&!a?"auto":"100%"},children:s.jsx(he,{sidebar:a,banner:n,advertisement:i,layoutMode:t})}):null},Ae=({sdk:e,sidebar:t,banner:a,event:n,layoutMode:l})=>{const{deactivate:d}=m.F(e);p.useEffect(()=>{n?e.createEventSession(n):d()},[n,d,e]);const i=o.useStore(e.featuresList.getStore());if(t&&a)return s.jsx("div",{style:{color:"red"},children:"define either sidebar or banner, not both."});if(!t&&!a&&l)return s.jsx("div",{style:{color:"red"},children:"layoutMode property unavailable for the overlay mode."});if(!i)return null;const c=e.getFeature(r.SdkOverlayType.GAMES);return c?s.jsx(be,{gamification:c,sidebar:t,banner:a,layoutMode:l}):null},fe=({event:e,sidebar:t,banner:a})=>{const n=m.useStreamLayer();return n?s.jsx("div",{className:"StreamLayerSDK",children:s.jsx(m.i,{children:s.jsx(Ae,{sdk:n,event:e,sidebar:t,banner:a,layoutMode:"side-by-side"})})}):null};exports.StreamLayerSDKAdvertisement=fe;
|
package/lib/cjs/app.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var K=Object.defineProperty;var U=(e,t,n)=>t in e?K(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var m=(e,t,n)=>U(e,typeof t!="symbol"?t+"":t,n);const o=require("react/jsx-runtime"),s=require("./index2.js"),c=require("react"),g=require("./useStreamLayerApp2.js");window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));function z(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==="QuotaExceededError"||e.name==="NS_ERROR_DOM_QUOTA_REACHED")}class B{constructor(t="main",n=window.localStorage){m(this,"delimiter",":");m(this,"prefix");m(this,"storage");m(this,"clear",()=>{for(const t in window.localStorage)t.startsWith(this.prefix)&&this.storage.removeItem(t)});m(this,"generateKey",t=>`${this.prefix}${this.delimiter}${t.join(this.delimiter)}`);m(this,"write",(...t)=>{const n=t.pop()||"",i=this.generateKey(t);try{this.storage.setItem(i,n)}catch(r){z(r)&&this.storage===window.sessionStorage&&(window.sessionStorage.removeItem("slstreamlogs"),this.storage.setItem(i,n))}});m(this,"read",(...t)=>{const n=this.storage.getItem(this.generateKey(t));return n===null?void 0:n});m(this,"remove",(...t)=>{this.storage.removeItem(this.generateKey(t))});this.prefix=`sl-sdk${this.delimiter}${t}`,this.storage=n}}var w;(function(e){e.Init="init",e.Ready="ready",e.Connecting="connecting",e.Connected="connected",e.Disconnected="disconnected",e.Failed="failed",e.Reconnect="reconnect",e.Reconnecting="reconnecting"})(w||(w={}));g.Code.Unknown,g.Code.Internal,g.Code.DeadlineExceeded,g.Code.ResourceExhausted,g.Code.FailedPrecondition,g.Code.Unavailable,g.Code.DataLoss;s.createLogger("grpc:retry");g.createContextKey(10,{description:"Number of attempts to retry"}),g.createContextKey(3e4,{description:"Max delay between retries in milliseconds"});var N;(function(e){e.SCHEMA="schema",e.EXTERNAL_TOKEN="eToken",e.TOKEN="token"})(N||(N={}));class W extends B{constructor(){super("user");m(this,"setSchema",n=>{this.write(N.SCHEMA,n)});m(this,"getSchema",()=>this.read(N.SCHEMA));m(this,"setToken",n=>{this.write(N.TOKEN,n)});m(this,"getToken",()=>this.read(N.TOKEN));m(this,"setExternalToken",n=>{this.write(N.EXTERNAL_TOKEN,n)});m(this,"getExternalToken",()=>this.read(N.EXTERNAL_TOKEN));m(this,"removeToken",()=>{this.remove(N.TOKEN)})}}var L;(function(e){e.DISABLED="disabled",e.INITIALIZATION="initialization",e.READY="ready",e.FAILED="failed",e.SUSPENDED="suspended"})(L||(L={}));s.createLogger("deep_link");s.createLogger("bypass");new W;s.createLogger("video_player");var T;(function(e){e.SHOWED="showed"})(T||(T={}));var D;(function(e){e.ALLOWED="allowed",e.DISALLOWED="disallowed"})(D||(D={}));var $;(function(e){e.UNKNOWN="unknown",e.ALREADY_VOTED="already_voted"})($||($={}));var O;(function(e){e.ONBOARDING="onboarding",e.ONBOARDING_IO="onboarding_io"})(O||(O={}));var _;(function(e){e.Unset="unset",e.Required="required",e.Optional="optional",e.Completed="completed",e.Disabled="disabled",e.Unavailable="unavailable"})(_||(_={}));g.QuestionType.POLL,g.QuestionType.PREDICTION,g.QuestionType.TRIVIA;const G={[g.SdkOverlayType.GAMES]:!0},I=s.styled_default("div")({name:"LoadingContainer",class:"lclc0ej",propsAsIs:!1}),H=({feature:e,sdk:t,children:n,className:i,noWait:r})=>{const l=s.useStore(e.status),d=s.useStore(t.sdkStore.slStreamId);if(!r){if(d!=null&&d.loading&&!d.data)return o.jsx(I,{className:i,children:"Event is loading..."});if(!(d!=null&&d.data))return o.jsx(I,{className:i,children:"Event is forbidden..."});if(l!==s.FeatureStatus.Ready)return o.jsx(I,{className:i,children:"Wait feature..."})}return n},M=c.createContext({sdk:null}),C=()=>c.useContext(M),X=s.styled_default("div")({name:"QuestionContainer",class:"q14ckf9e",propsAsIs:!1}),Y=({openedQuestion:e})=>{var t,n;const{sdk:i}=C();return((t=e==null?void 0:e.attributes)==null?void 0:t.attributes.case)==="insight"?o.jsx(s.x,{...e.attributes.attributes.value,controlVideo:i==null?void 0:i.controlVideoPlayer}):((n=e==null?void 0:e.attributes)==null?void 0:n.attributes.case)==="tweet"?o.jsx(s.a,{...e.attributes.attributes.value,controlVideo:i==null?void 0:i.controlVideoPlayer}):null},Z=({extendedQuestion:e,vote:t,close:n})=>{const{loading:i,data:r}=e;return r?o.jsx(s.Nt,{vote:t,close:n,openedQuestion:r,isLoading:!!i}):o.jsx(s.kt,{})},J=({gamification:e})=>{var t,n,i;const r=s.useStore(e.openedQuestion.$store),l=s.useStore(e.openedQuestion.$extendedStore);if(!r)return null;const d=r.type;return o.jsxs(X,{children:[o.jsx(s.T,{close:e.closeQuestion,type:((t=r.attributes)==null?void 0:t.type)||g.QuestionType.UNSET}),d==="question"&&o.jsx(Z,{vote:e.submitAnswer,close:e.closeQuestion,extendedQuestion:l}),d!=="question"&&o.jsx(Y,{openedQuestion:r}),o.jsx(s.i,{sponsorLogo:(i=(n=l.data)==null?void 0:n.sponsorship)==null?void 0:i.logo})]})},ee=s.styled_default("div")({name:"InviteFriendsContainer",class:"i1c9dygq",propsAsIs:!1}),se=({deepLink:e})=>o.jsx(ee,{children:o.jsx(s.M,{inviteLink:e,inviteCardTitle:"It’s More Fun With Friends",inviteCardSubtext:"Invite and compete against your friends for the top spot on the leaderboard."})}),te=s.styled_default("div")({name:"InviteLinkContainer",class:"i1odbhm4",propsAsIs:!1}),ne=({gamification:e,scrollNode:t,scrollStore:n})=>{const i=c.useRef(null),{data:r,hasMore:l,loading:d,key:u}=s.useStore(e.leaderboardList.$store),{data:a}=s.useStore(e.deepLink.$store),[v,p]=s.T$1(i);return!r.length&&!d?o.jsx(se,{deepLink:a}):o.jsxs(o.Fragment,{children:[o.jsx(s.S,{items:r,scrollNode:t,scrollStore:n,fetchMore:e.leaderboardList.fetchMore,hasMore:l,openItemDetail:e.openUser,currentUserId:e.currentUserId.get()},u),a&&o.jsx(te,{ref:i,children:o.jsx(s.C,{onClick:()=>v(a),title:"Invite Friends",description:"Challenge them now!"})}),p]})},oe=({store:e,openQuestion:t})=>{const{sdk:n}=C(),i=s.useStore(e);return o.jsx(s.k,{openQuestion:t,questions:i.data,controlVideo:n==null?void 0:n.controlVideoPlayer})},ie=({userSummary:e})=>{var t;const[n,i]=c.useState(void 0);return c.useEffect(()=>{const r=e.$store.subscribe(l=>{l&&i(l)});return()=>{r()}},[e]),o.jsx(s.O,{loading:!(n!=null&&n.summary),...n==null?void 0:n.summary,successRate:(t=n==null?void 0:n.percentage)==null?void 0:t.correct})},re=({gamification:e,className:t,scrollStore:n,scrollNode:i,appNode:r,style:l,responsiveStore:d})=>{const{tabsShown:u}=s.useStore(n,{keys:["tabsShown"]}),[a,v]=c.useState(s.m.HOME),[,p]=c.useTransition(),{sdkInDesktopView:h,screen:f}=s.useStore(d,{keys:["sdkInDesktopView"]}),x=k=>{p(()=>{var y;v(k),h===!1&&(((y=r.current)==null?void 0:y.getBoundingClientRect().y)||0)<0&&s.C$2(r,f.size,{behavior:"instant"})})};c.useEffect(()=>n.subscribe(k=>{if(k.scrollPosition===0){n.setKey("tabsShown",!0);return}d.get().sdkInDesktopView?n.setKey("tabsShown",k.scrollDirection==="backward"):n.setKey("tabsShown",k.scrollDirection==="forward")}),[n,d]);let S="0px";return h?S=u?"0px":"calc(8px - var(--header-height) - var(--header-offset))":S=u?"calc(var(--header-height) + var(--header-offset) - 2px)":"0px",o.jsxs(s.l,{className:t,style:l,children:[o.jsx(s.C$1,{style:{top:S},children:o.jsx(s.b,{activePage:a,toggleActivePage:x})}),a===s.m.HOME&&o.jsxs(o.Fragment,{children:[o.jsx(s.n,{style:{paddingTop:"8px"},children:o.jsx(s.m$1,{children:o.jsx(ie,{userSummary:e.userSummary})})}),o.jsx(s.a$1,{style:{flex:1},children:o.jsx(oe,{openQuestion:e.openQuestion,store:e.feedList.getStore()})})]}),a===s.m.LEADERBOARD&&o.jsx(s.p$1,{children:o.jsx(ne,{scrollStore:n,scrollNode:i,gamification:e})})]})},ae=()=>s.x$2,R=s.styled_default(ae())({name:"OpenedContainer",class:"ouvguos",propsAsIs:!0}),le=s.styled_default("div")({name:"UserContainer",class:"u1eu4lbg",propsAsIs:!1}),de=({correct:e,incorrect:t})=>{const n=e+t;return n===0?0:Math.round(e/n*100)},ce=({gamification:e,scrollStore:t,className:n,appNode:i,scrollNode:r,responsiveStore:l})=>o.jsx(re,{appNode:i,scrollStore:t,scrollNode:r,className:n,gamification:e,responsiveStore:l}),ue=({gamification:e,className:t,appNode:n,responsiveStore:i})=>{const r=s.useStore(e.openedQuestion.$store),l=s.useStore(e.openedUser),{sdkInDesktopView:d}=s.useStore(i,{keys:["sdkInDesktopView"]}),{hiding:u,onAnimationEnd:a}=s.S$1();if(!n.current||!r&&!l)return null;const v=r?o.jsx(R,{className:t,hiding:u,onAnimationEnd:a,children:o.jsx(J,{gamification:e})}):l?o.jsx(R,{className:t,hiding:u,onAnimationEnd:a,children:o.jsxs(le,{children:[o.jsx(s.T,{label:"Friend's Rank",close:e.closeUser}),o.jsx(s.n,{children:o.jsx(s.O,{...l,successRate:de(l)})})]})}):null;return o.jsx(s.x$1,{container:n,useContainer:!d,children:v})},pe=c.lazy(()=>Promise.resolve().then(()=>require("./gamification-feature.js"))),ve=({sdk:e,feature:t,className:n,scrollStore:i,appNode:r,scrollNode:l,responsiveStore:d})=>{const u=c.useMemo(()=>t&&t.featureConfig.get().type===g.SdkOverlayType.GAMES?o.jsx(H,{className:n,sdk:e,feature:t,children:o.jsx(pe,{appNode:r,scrollStore:i,scrollNode:l,className:n,responsiveStore:d,gamification:t})}):null,[e,t,n,d,i,l,r]);return o.jsx(c.Suspense,{fallback:o.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:"page loading..."}),children:u})},he=({feature:e,className:t,appNode:n,responsiveStore:i})=>e&&e.featureConfig.get().type===g.SdkOverlayType.GAMES?o.jsx(ue,{className:t,appNode:n,responsiveStore:i,gamification:e}):null,ge=()=>s.c1,me=s.styled_default(ge())({name:"ButtonIcon",class:"b11wpe79",propsAsIs:!0}),fe=c.forwardRef(({sdk:e,className:t},n)=>{const i=s.useStore(e.sdkStore.organizationSettings),r=s.useStore(e.sdkStore.streamSettings),l=s.useStore(e.getActiveFeature()),d=c.useMemo(()=>{const a=(r==null?void 0:r.data)||(i==null?void 0:i.data);return a!=null&&a.overlays?a.overlays:[]},[i,r]),u=c.useMemo(()=>[...d.filter(({enableSdkButton:a})=>a).map(a=>({id:a.type,onClick:()=>e.openFeature(a.type),disabled:!(a.type in G),label:a.name,icon:o.jsx("img",{src:a.icon,alt:""}),position:a.position*10}))].sort((a,v)=>a.position-v.position),[d,e]);return o.jsxs(s.n$1,{className:t,children:[o.jsx(s.e,{children:[o.jsx(s.I,{id:"Channels",onClick:()=>e.closeFeature(),label:"Channels",active:l===0},"Channels"),...u.map(a=>a.id===g.SdkOverlayType.GAMES?o.jsx(s.I,{...a,active:a.id===l,label:"StreamLayer +",id:"featuredGroups",icon:o.jsx(me,{name:"icon-btn-feature-groups","data-selected":a.id===l})},a.id):o.jsx(s.I,{...a,icon:void 0,active:a.id===l},a.id))]}),o.jsx("div",{ref:n})]})}),ye=s.styled_default("div")({name:"Container",class:"c1qjj4d4",propsAsIs:!1}),xe=s.styled_default("div")({name:"CloseIconWrap",class:"c1lg6b8a",propsAsIs:!1}),Se=()=>s.c1,ke=s.styled_default(Se())({name:"CloseIcon",class:"c159el66",propsAsIs:!0}),Ne=s.styled_default("div")({name:"Title",class:"t16xmufv",propsAsIs:!1}),je=s.styled_default("img")({name:"SponsorLogo",class:"s83lc21",propsAsIs:!1}),be=s.styled_default("div")({name:"PresentsTitle",class:"p1p7igia",propsAsIs:!1}),Ie=s.styled_default("div")({name:"Subtitle",class:"s1eftsbu",propsAsIs:!1}),Ee=s.styled_default("div")({name:"Description",class:"d8uezec",propsAsIs:!1}),Ce=s.styled_default("button")({name:"ActionButton",class:"a1h1bk90",propsAsIs:!1}),V=({close:e,action:t,onboarding:n})=>{var i,r,l,d,u,a,v,p;return o.jsxs(ye,{children:[o.jsx(xe,{onClick:e,children:o.jsx(ke,{name:"icon-cross"})}),((r=(i=n==null?void 0:n.titleCard)==null?void 0:i.media)==null?void 0:r.sponsorLogo)&&o.jsxs(Ne,{children:[o.jsx(je,{alt:"sponsor-logo",src:(d=(l=n==null?void 0:n.titleCard)==null?void 0:l.media)==null?void 0:d.sponsorLogo}),o.jsx(be,{children:"PRESENTS"})]}),((u=n==null?void 0:n.titleCard)==null?void 0:u.title)&&o.jsx(Ie,{children:(a=n==null?void 0:n.titleCard)==null?void 0:a.title}),((v=n==null?void 0:n.titleCard)==null?void 0:v.subtitle)&&o.jsx(Ee,{children:(p=n==null?void 0:n.titleCard)==null?void 0:p.subtitle}),o.jsx(Ce,{onClick:t,children:"Play Now"})]})},E=[{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",tagline:"",headline:o.jsxs(o.Fragment,{children:["Welcome to ",o.jsx("br",{})," StreamLayer +"]})},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",headline:"Get real-time insights"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",headline:"Predictions, trivia & polls synced to match play"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",headline:"Win points for every answer you get right"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",headline:"Compete against friends on the leaderboard"}],Ae=s.styled_default("div")({name:"OnboardingContainer",class:"o1xni1kr",propsAsIs:!1}),we=()=>s.x$2,Le=s.styled_default(we())({name:"OnboardingNotificationContainer",class:"o1vnouv7",propsAsIs:!0}),q=s.styled_default("div")({name:"InnerContainer",class:"i59uefw",propsAsIs:!1}),Te=({deepLink:e,onboardingOpts:t,notification:n,gamification:i,loading:r,sdk:l})=>{var d,u,a,v,p,h,f;const x=s.useStore(i.friends.getStore()),[S,k]=c.useState(void 0),y=c.useMemo(()=>{var j,b;const A=l.getInviter();return A?(b=(j=x.data)==null?void 0:j.find(({slId:Q})=>Q===A))==null?void 0:b.name:""},[x.data,l]);return c.useEffect(()=>{const j=e.$store.subscribe(b=>{b&&k(b.data)});return()=>{j()}},[e.$store]),o.jsx(Ae,{children:o.jsx(s.rn,{loading:r,rules:[{label:"Answer as many questions as you like.",icon:"icon-btn-feature-groups"},{label:"Win points for each correct trivia or prediction answer.",icon:"icon-thumb-up"},{label:"Top the leader board and best your friends.",icon:"icon-trophy"}],rulesBtnLabel:(d=t.rules)==null?void 0:d.buttonLabel,rulesTitle:(u=t.rules)==null?void 0:u.heading,termsTitle:"Terms and Conditions",termsText:(a=t.rules)==null?void 0:a.terms,steps:E,primaryColor:(v=t.inviteCard)==null?void 0:v.iconColor,inviteLink:S,inviteCardTitle:(p=t.inviteCard)==null?void 0:p.heading,inviteCardSubtext:(h=t.inviteCard)==null?void 0:h.subtext,inviteCardBtnLabel:(f=t.inviteCard)==null?void 0:f.buttonLabel,onClose:()=>{var j;(j=n.close)==null||j.call(n)},gamification:i,sdk:l,inviterName:y})})},De=({sdk:e,notification:t,saveHeight:n,style:i,appNode:r,sdkInDesktopView:l,responsiveStore:d})=>{const u=c.useRef(null),a=t.data.onboarding,[v,p]=c.useState(a==null?void 0:a.instantOpen),h=e.getFeature(g.SdkOverlayType.GAMES),f=c.useMemo(()=>E==null?void 0:E.map(({graphicSrc:y})=>y),[]),{screen:x}=s.useStore(d,{keys:["screen"]});c.useLayoutEffect(()=>{var y;n(((y=u.current)==null?void 0:y.getBoundingClientRect().height)||0)},[n]);const{loading:S,throttled:k}=s.I$1(f);return v&&h&&a&&r.current&&!k?o.jsx(s.x$1,{container:r,useContainer:!l,children:o.jsx(Te,{notification:t,setOpened:p,gamification:h,onboardingOpts:a,deepLink:h.deepLink,loading:S,renderToNode:r,sdk:e})}):o.jsxs(o.Fragment,{children:[o.jsx(q,{ref:u,style:{position:"absolute",visibility:"hidden"},children:o.jsx(V,{close:()=>{},action:()=>{},onboarding:a})}),o.jsx(Le,{style:i,hiding:t.hiding,children:o.jsx(q,{children:o.jsx(V,{close:t.close,action:()=>{var y;p(!0),(((y=r.current)==null?void 0:y.getBoundingClientRect().y)||0)<0&&s.C$2(r,x.size,{behavior:"smooth"})},onboarding:a})})})]})},$e=()=>s.x$2,Oe=s.styled_default($e())({name:"Container",class:"c8ol1ve",propsAsIs:!0}),F=s.styled_default("div")({name:"InnerContainer",class:"iqfywam",propsAsIs:!1}),_e=()=>F,Re=s.styled_default(_e())({name:"HiddenContainer",class:"hokmtod",propsAsIs:!0}),Ve=s.styled_default("div")({name:"NotificationRefreshing",class:"n192d1q8",propsAsIs:!1}),qe=()=>s.h,Me=s.styled_default(qe())({name:"Pill",class:"p1lha68t",propsAsIs:!0}),Fe=e=>{const[t,n]=c.useState(0),i=c.useRef(null),r=c.useCallback(d=>{i.current=d},[]);c.useEffect(()=>{var d;const u=(d=i.current)==null?void 0:d.getBoundingClientRect();u&&n(u.height)},[e]);const l=c.useCallback(d=>{n(d)},[]);return[r,t,l]},Pe=({sdk:e,notification:t,appNode:n,responsiveStore:i})=>{var r,l;const{sdkInDesktopView:d}=s.useStore(i,{keys:["sdkInDesktopView"]}),{sdk:u}=C(),[a,v,p]=Fe(t.id);return t.type===s.NotificationType.QUESTION?o.jsxs(o.Fragment,{children:[o.jsx(Re,{ref:a,children:o.jsx(s.k$1,{...t})}),o.jsxs(Oe,{style:{height:t.hiding?0:v},hiding:t.hiding,children:[o.jsx(F,{style:{height:"100%"},children:o.jsx(s.k$1,{...t,controlVideo:u==null?void 0:u.controlVideoPlayer})}),o.jsx(Ve,{},t.id)]})]}):t.type===s.NotificationType.QUESTION_RESOLVED&&(l=(r=t.data)==null?void 0:r.question)!=null&&l.predictionResult?o.jsx(s.q,{style:{height:t.hiding?0:v},saveHeight:p,close:t.close,hiding:t.hiding,...t.data.question}):t.type===s.NotificationType.ONBOARDING?o.jsx(De,{style:{height:t.hiding?0:v},saveHeight:p,sdk:e,notification:t,sdkInDesktopView:d,appNode:n,responsiveStore:i}):null},Qe="p7vfi6t",Ke=({pill:e,setPill:t,appNode:n,headerNode:i,scrollNode:r,responsiveStore:l,scrollStore:d})=>{var u,a;const{screen:v}=s.useStore(l,{keys:["screen"]}),{tabsShown:p,scrollPosition:h}=s.useStore(d,{keys:["tabsShown","scrollPosition"]});c.useEffect(()=>{l.get().sdkInDesktopView?h<50&&t(null):h>-50&&t(null)},[h,l,t]);const f=l.get().sdkInDesktopView?n:i;return!e||!f.current?null:s.Ik.createPortal(o.jsx(Me,{title:e.type===s.NotificationType.QUESTION_RESOLVED?"Prediction result":`New ${((a=s.o[(u=e.data)==null?void 0:u.questionType])==null?void 0:a.label)||"notification"}`,onClick:()=>{var x;l.get().sdkInDesktopView?(x=r.current)==null||x.scrollTo({top:0,behavior:"smooth"}):s.C$2(n,v.size,{behavior:"smooth"}),t(null)},className:s.cx_default(p&&Qe,"sl-pill-button")}),f.current)},Ue=({sdk:e,headerNode:t,scrollNode:n,responsiveStore:i,appNode:r,scrollStore:l})=>{const[d]=c.useState(e.getNotificationsStore()),u=s.useStore(d),[a,v]=c.useState(null),p=c.useMemo(()=>e.getActiveNotification(),[e,u]);return c.useEffect(()=>{p&&s.eventBus.emit("notification",{action:"rendered",payload:{questionId:p.data.questionId,questionType:p.data.questionType}})},[p]),c.useEffect(()=>{p&&(i.get().sdkInDesktopView||i.get().sdkInView)&&(!i.get().sdkInDesktopView&&i.get().sdkInView&&v(p),i.get().sdkInDesktopView&&window.requestAnimationFrame(()=>{l.get().scrollPosition!==0&&v(p)}))},[p]),c.useEffect(()=>{p||v(null)},[p]),o.jsxs(o.Fragment,{children:[!a&&p&&o.jsx(Pe,{headerNode:t,appNode:r,sdk:e,notification:p,responsiveStore:i}),a&&o.jsx(Ke,{pill:a,setPill:v,appNode:r,notification:p,headerNode:t,scrollNode:n,scrollStore:l,responsiveStore:i})]})},ze=e=>{const t=c.useRef(""),[n,i]=c.useState(!1),r=s.useStore(e.status),l=s.useStore(e.sdkStore.slStreamId),d=s.useStore(e.userId()),u=s.useStore(e.getActiveFeature()),a=r==="ready"&&!!l.data;c.useEffect(()=>{const h=e.getFeature(g.SdkOverlayType.GAMES);h&&(h.closeQuestion(),h.closeUser())},[u,e]);const v=c.useCallback(h=>{t.current=h,i(!0),e.initializeApp({skipOrganizationSettings:!0}).then(({enabled:f,err:x})=>{if(!x&&f){e.isUserAuthorized().then(S=>{S||e.disableApp()});return}})},[e]),p=c.useCallback(()=>{i(!1),e.disableApp()},[e]);return c.useEffect(()=>{if(!d){a&&e.disableApp();return}if(d&&t.current&&n){e.initializeApp({skipOrganizationSettings:!0}).then(()=>{e.createEventSession(t.current)});return}},[d]),c.useEffect(()=>()=>{i(!1),e.disableApp()},[i,e]),{sdkEnabled:n,sdkReady:a,activateEventWithId:v,deactivate:p,isLogged:!!d}},Be=({sdk:e,className:t,scrollStore:n,appNode:i,scrollNode:r,responsiveStore:l})=>{const[,d]=s.p$2(e);return o.jsx(ve,{className:t,scrollNode:r,appNode:i,scrollStore:n,feature:d,responsiveStore:l,sdk:e})},We=({sdk:e,className:t,appNode:n,responsiveStore:i})=>{const r=s.useStore(e.featuresList.getStore());return r?Array.from(r,l=>{const d=e.getFeature(l);return d?o.jsx(he,{className:t,appNode:n,feature:d,responsiveStore:i,sdk:e},l):null}):null},Ge=({sdk:e,event:t})=>{const n=c.useRef(null),i=c.useRef(null),[r]=s.v(n),[l,d]=s.D(n,r),{sdkEnabled:u,sdkReady:a,activateEventWithId:v,deactivate:p,isLogged:h}=ze(e);c.useEffect(()=>{t?(e.createEventSession(t),v(t)):p()},[t,v,p,e]),s.L(n,{enabled:u,event:"click",listener:s.b$1}),s.L(l,{enabled:u,event:"scrollend",listener:s.y,useDomNode:!0}),s.L(l,{enabled:u,event:"click",listener:s.w,useDomNode:!0});const f=c.useMemo(()=>({sdk:e}),[e]);return c.useEffect(()=>{Promise.resolve().then(()=>require("./gamification-feature.js"))},[]),o.jsx(M.Provider,{value:f,children:o.jsxs(s.i$1,{ref:n,children:[u&&o.jsx(fe,{className:s.p,sdk:e,ref:i}),o.jsxs(s.c,{className:"sl-hide-on-modal",ref:l,"data-nav":u.toString(),children:[a&&o.jsx(Ue,{sdk:e,scrollNode:l,headerNode:i,appNode:n,scrollStore:d,responsiveStore:r}),a&&o.jsx(Be,{scrollStore:d,responsiveStore:r,scrollNode:l,appNode:n,className:s.p,sdk:e}),a&&o.jsx(We,{responsiveStore:r,appNode:n,className:s.p,sdk:e})]}),u&&!h&&o.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:"You are not logged in."})]})})},P=({children:e,style:t})=>o.jsx("div",{className:"StreamLayerSDKTheme",children:o.jsx("div",{className:s.m$2,style:t,children:e})}),He=()=>{const{sdk:e}=c.useContext(s.StreamLayerContext);return e},Xe=({event:e})=>{const{sdk:t,status:n}=c.useContext(s.StreamLayerContext);if(n===s.StreamLayerStatus.UNSET)throw new Error("Wrap app in `StreamLayerProvider`");return n===s.StreamLayerStatus.CONNECTED?o.jsx("div",{className:"StreamLayerSDK",children:"wait"}):t===null?o.jsx("div",{className:"StreamLayerSDK",children:"sdk not initialized"}):o.jsx("div",{className:"StreamLayerSDK",children:o.jsx(P,{children:o.jsx(Ge,{sdk:t,event:e})})})};exports.E=ce;exports.StreamLayerSDKReact=Xe;exports.i=P;exports.useStreamLayer=He;
|
|
1
|
+
"use strict";var U=Object.defineProperty;var z=(e,t,n)=>t in e?U(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var m=(e,t,n)=>z(e,typeof t!="symbol"?t+"":t,n);const o=require("react/jsx-runtime"),s=require("./index2.js"),c=require("react"),g=require("./useStreamLayerApp2.js");window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));function B(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==="QuotaExceededError"||e.name==="NS_ERROR_DOM_QUOTA_REACHED")}class W{constructor(t="main",n=window.localStorage){m(this,"delimiter",":");m(this,"prefix");m(this,"storage");m(this,"clear",()=>{for(const t in window.localStorage)t.startsWith(this.prefix)&&this.storage.removeItem(t)});m(this,"generateKey",t=>`${this.prefix}${this.delimiter}${t.join(this.delimiter)}`);m(this,"write",(...t)=>{const n=t.pop()||"",i=this.generateKey(t);try{this.storage.setItem(i,n)}catch(r){B(r)&&this.storage===window.sessionStorage&&(window.sessionStorage.removeItem("slstreamlogs"),this.storage.setItem(i,n))}});m(this,"read",(...t)=>{const n=this.storage.getItem(this.generateKey(t));return n===null?void 0:n});m(this,"remove",(...t)=>{this.storage.removeItem(this.generateKey(t))});this.prefix=`sl-sdk${this.delimiter}${t}`,this.storage=n}}var w;(function(e){e.Init="init",e.Ready="ready",e.Connecting="connecting",e.Connected="connected",e.Disconnected="disconnected",e.Failed="failed",e.Reconnect="reconnect",e.Reconnecting="reconnecting"})(w||(w={}));g.Code.Unknown,g.Code.Internal,g.Code.DeadlineExceeded,g.Code.ResourceExhausted,g.Code.FailedPrecondition,g.Code.Unavailable,g.Code.DataLoss;s.createLogger("grpc:retry");g.createContextKey(10,{description:"Number of attempts to retry"}),g.createContextKey(3e4,{description:"Max delay between retries in milliseconds"});var N;(function(e){e.SCHEMA="schema",e.EXTERNAL_TOKEN="eToken",e.TOKEN="token"})(N||(N={}));class G extends W{constructor(){super("user");m(this,"setSchema",n=>{this.write(N.SCHEMA,n)});m(this,"getSchema",()=>this.read(N.SCHEMA));m(this,"setToken",n=>{this.write(N.TOKEN,n)});m(this,"getToken",()=>this.read(N.TOKEN));m(this,"setExternalToken",n=>{this.write(N.EXTERNAL_TOKEN,n)});m(this,"getExternalToken",()=>this.read(N.EXTERNAL_TOKEN));m(this,"removeToken",()=>{this.remove(N.TOKEN)})}}var L;(function(e){e.DISABLED="disabled",e.INITIALIZATION="initialization",e.READY="ready",e.FAILED="failed",e.SUSPENDED="suspended"})(L||(L={}));s.createLogger("deep_link");s.createLogger("bypass");new G;s.createLogger("video_player");var T;(function(e){e.SHOWED="showed"})(T||(T={}));var D;(function(e){e.ALLOWED="allowed",e.DISALLOWED="disallowed"})(D||(D={}));var $;(function(e){e.UNKNOWN="unknown",e.ALREADY_VOTED="already_voted"})($||($={}));var O;(function(e){e.ONBOARDING="onboarding",e.ONBOARDING_IO="onboarding_io"})(O||(O={}));var _;(function(e){e.Unset="unset",e.Required="required",e.Optional="optional",e.Completed="completed",e.Disabled="disabled",e.Unavailable="unavailable"})(_||(_={}));g.QuestionType.POLL,g.QuestionType.PREDICTION,g.QuestionType.TRIVIA;const H={[g.SdkOverlayType.GAMES]:!0},I=s.styled_default("div")({name:"LoadingContainer",class:"lclc0ej",propsAsIs:!1}),X=({feature:e,sdk:t,children:n,className:i,noWait:r})=>{const l=s.useStore(e.status),d=s.useStore(t.sdkStore.slStreamId);if(!r){if(d!=null&&d.loading&&!d.data)return o.jsx(I,{className:i,children:"Event is loading..."});if(!(d!=null&&d.data))return o.jsx(I,{className:i,children:"Event is forbidden..."});if(l!==s.FeatureStatus.Ready)return o.jsx(I,{className:i,children:"Wait feature..."})}return n},F=c.createContext({sdk:null}),C=()=>c.useContext(F),Y=s.styled_default("div")({name:"QuestionContainer",class:"q14ckf9e",propsAsIs:!1}),Z=({openedQuestion:e})=>{var t,n;const{sdk:i}=C();return((t=e==null?void 0:e.attributes)==null?void 0:t.attributes.case)==="insight"?o.jsx(s.x,{...e.attributes.attributes.value,controlVideo:i==null?void 0:i.controlVideoPlayer}):((n=e==null?void 0:e.attributes)==null?void 0:n.attributes.case)==="tweet"?o.jsx(s.a,{...e.attributes.attributes.value,controlVideo:i==null?void 0:i.controlVideoPlayer}):null},J=({extendedQuestion:e,vote:t,close:n})=>{const{loading:i,data:r}=e;return r?o.jsx(s.Nt,{vote:t,close:n,openedQuestion:r,isLoading:!!i}):o.jsx(s.kt,{})},ee=({gamification:e})=>{var t,n,i;const r=s.useStore(e.openedQuestion.$store),l=s.useStore(e.openedQuestion.$extendedStore);if(!r)return null;const d=r.type;return o.jsxs(Y,{children:[o.jsx(s.T,{close:e.closeQuestion,type:((t=r.attributes)==null?void 0:t.type)||g.QuestionType.UNSET}),d==="question"&&o.jsx(J,{vote:e.submitAnswer,close:e.closeQuestion,extendedQuestion:l}),d!=="question"&&o.jsx(Z,{openedQuestion:r}),o.jsx(s.i,{sponsorLogo:(i=(n=l.data)==null?void 0:n.sponsorship)==null?void 0:i.logo})]})},se=s.styled_default("div")({name:"InviteFriendsContainer",class:"i1c9dygq",propsAsIs:!1}),te=({deepLink:e})=>o.jsx(se,{children:o.jsx(s.M,{inviteLink:e,inviteCardTitle:"It’s More Fun With Friends",inviteCardSubtext:"Invite and compete against your friends for the top spot on the leaderboard."})}),ne=s.styled_default("div")({name:"InviteLinkContainer",class:"i1odbhm4",propsAsIs:!1}),oe=({gamification:e,scrollNode:t,scrollStore:n})=>{const i=c.useRef(null),{data:r,hasMore:l,loading:d,key:u}=s.useStore(e.leaderboardList.$store),{data:a}=s.useStore(e.deepLink.$store),[v,p]=s.T$1(i);return!r.length&&!d?o.jsx(te,{deepLink:a}):o.jsxs(o.Fragment,{children:[o.jsx(s.S,{items:r,scrollNode:t,scrollStore:n,fetchMore:e.leaderboardList.fetchMore,hasMore:l,openItemDetail:e.openUser,currentUserId:e.currentUserId.get()},u),a&&o.jsx(ne,{ref:i,children:o.jsx(s.C,{onClick:()=>v(a),title:"Invite Friends",description:"Challenge them now!"})}),p]})},ie=({store:e,openQuestion:t})=>{const{sdk:n}=C(),i=s.useStore(e);return o.jsx(s.k,{openQuestion:t,questions:i.data,controlVideo:n==null?void 0:n.controlVideoPlayer})},re=({userSummary:e})=>{var t;const[n,i]=c.useState(void 0);return c.useEffect(()=>{const r=e.$store.subscribe(l=>{l&&i(l)});return()=>{r()}},[e]),o.jsx(s.O,{loading:!(n!=null&&n.summary),...n==null?void 0:n.summary,successRate:(t=n==null?void 0:n.percentage)==null?void 0:t.correct})},ae=({gamification:e,className:t,scrollStore:n,scrollNode:i,appNode:r,style:l,responsiveStore:d})=>{const{tabsShown:u}=s.useStore(n,{keys:["tabsShown"]}),[a,v]=c.useState(s.m.HOME),[,p]=c.useTransition(),{sdkInDesktopView:h,screen:f}=s.useStore(d,{keys:["sdkInDesktopView"]}),x=k=>{p(()=>{var y;v(k),h===!1&&(((y=r.current)==null?void 0:y.getBoundingClientRect().y)||0)<0&&s.C$2(r,f.size,{behavior:"instant"})})};c.useEffect(()=>n.subscribe(k=>{if(k.scrollPosition===0){n.setKey("tabsShown",!0);return}d.get().sdkInDesktopView?n.setKey("tabsShown",k.scrollDirection==="backward"):n.setKey("tabsShown",k.scrollDirection==="forward")}),[n,d]);let S="0px";return h?S=u?"0px":"calc(8px - var(--header-height) - var(--header-offset))":S=u?"calc(var(--header-height) + var(--header-offset) - 2px)":"0px",o.jsxs(s.l,{className:t,style:l,children:[o.jsx(s.C$1,{style:{top:S},children:o.jsx(s.b,{activePage:a,toggleActivePage:x})}),a===s.m.HOME&&o.jsxs(o.Fragment,{children:[o.jsx(s.n,{style:{paddingTop:"8px"},children:o.jsx(s.m$1,{children:o.jsx(re,{userSummary:e.userSummary})})}),o.jsx(s.a$1,{style:{flex:1},children:o.jsx(ie,{openQuestion:e.openQuestion,store:e.feedList.getStore()})})]}),a===s.m.LEADERBOARD&&o.jsx(s.p,{children:o.jsx(oe,{scrollStore:n,scrollNode:i,gamification:e})})]})},le=()=>s.x$2,R=s.styled_default(le())({name:"OpenedContainer",class:"ouvguos",propsAsIs:!0}),de=s.styled_default("div")({name:"UserContainer",class:"u1eu4lbg",propsAsIs:!1}),ce=({correct:e,incorrect:t})=>{const n=e+t;return n===0?0:Math.round(e/n*100)},ue=({gamification:e,scrollStore:t,className:n,appNode:i,scrollNode:r,responsiveStore:l})=>o.jsx(ae,{appNode:i,scrollStore:t,scrollNode:r,className:n,gamification:e,responsiveStore:l}),pe=({gamification:e,className:t,appNode:n,responsiveStore:i})=>{const r=s.useStore(e.openedQuestion.$store),l=s.useStore(e.openedUser),{sdkInDesktopView:d}=s.useStore(i,{keys:["sdkInDesktopView"]}),{hiding:u,onAnimationEnd:a}=s.S$1();if(!n.current||!r&&!l)return null;const v=r?o.jsx(R,{className:t,hiding:u,onAnimationEnd:a,children:o.jsx(ee,{gamification:e})}):l?o.jsx(R,{className:t,hiding:u,onAnimationEnd:a,children:o.jsxs(de,{children:[o.jsx(s.T,{label:"Friend's Rank",close:e.closeUser}),o.jsx(s.n,{children:o.jsx(s.O,{...l,successRate:ce(l)})})]})}):null;return o.jsx(s.x$1,{container:n,useContainer:!d,children:v})},ve=c.lazy(()=>Promise.resolve().then(()=>require("./gamification-feature.js"))),he=({sdk:e,feature:t,className:n,scrollStore:i,appNode:r,scrollNode:l,responsiveStore:d})=>{const u=c.useMemo(()=>t&&t.featureConfig.get().type===g.SdkOverlayType.GAMES?o.jsx(X,{className:n,sdk:e,feature:t,children:o.jsx(ve,{appNode:r,scrollStore:i,scrollNode:l,className:n,responsiveStore:d,gamification:t})}):null,[e,t,n,d,i,l,r]);return o.jsx(c.Suspense,{fallback:o.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:"page loading..."}),children:u})},ge=({feature:e,className:t,appNode:n,responsiveStore:i})=>e&&e.featureConfig.get().type===g.SdkOverlayType.GAMES?o.jsx(pe,{className:t,appNode:n,responsiveStore:i,gamification:e}):null,me=()=>s.c1,fe=s.styled_default(me())({name:"ButtonIcon",class:"b11wpe79",propsAsIs:!0}),ye=c.forwardRef(({sdk:e,className:t},n)=>{const i=s.useStore(e.sdkStore.organizationSettings),r=s.useStore(e.sdkStore.streamSettings),l=s.useStore(e.getActiveFeature()),d=c.useMemo(()=>{const a=(r==null?void 0:r.data)||(i==null?void 0:i.data);return a!=null&&a.overlays?a.overlays:[]},[i,r]),u=c.useMemo(()=>[...d.filter(({enableSdkButton:a})=>a).map(a=>({id:a.type,onClick:()=>e.openFeature(a.type),disabled:!(a.type in H),label:a.name,icon:o.jsx("img",{src:a.icon,alt:""}),position:a.position*10}))].sort((a,v)=>a.position-v.position),[d,e]);return o.jsxs(s.n$1,{className:t,children:[o.jsx(s.e,{children:[o.jsx(s.I,{id:"Channels",onClick:()=>e.closeFeature(),label:"Channels",active:l===0},"Channels"),...u.map(a=>a.id===g.SdkOverlayType.GAMES?o.jsx(s.I,{...a,active:a.id===l,label:"StreamLayer +",id:"featuredGroups",icon:o.jsx(fe,{name:"icon-btn-feature-groups","data-selected":a.id===l})},a.id):o.jsx(s.I,{...a,icon:void 0,active:a.id===l},a.id))]}),o.jsx("div",{ref:n})]})}),xe=s.styled_default("div")({name:"Container",class:"c1qjj4d4",propsAsIs:!1}),Se=s.styled_default("div")({name:"CloseIconWrap",class:"c1lg6b8a",propsAsIs:!1}),ke=()=>s.c1,Ne=s.styled_default(ke())({name:"CloseIcon",class:"c159el66",propsAsIs:!0}),je=s.styled_default("div")({name:"Title",class:"t16xmufv",propsAsIs:!1}),be=s.styled_default("img")({name:"SponsorLogo",class:"s83lc21",propsAsIs:!1}),Ie=s.styled_default("div")({name:"PresentsTitle",class:"p1p7igia",propsAsIs:!1}),Ee=s.styled_default("div")({name:"Subtitle",class:"s1eftsbu",propsAsIs:!1}),Ce=s.styled_default("div")({name:"Description",class:"d8uezec",propsAsIs:!1}),Ae=s.styled_default("button")({name:"ActionButton",class:"a1h1bk90",propsAsIs:!1}),V=({close:e,action:t,onboarding:n})=>{var i,r,l,d,u,a,v,p;return o.jsxs(xe,{children:[o.jsx(Se,{onClick:e,children:o.jsx(Ne,{name:"icon-cross"})}),((r=(i=n==null?void 0:n.titleCard)==null?void 0:i.media)==null?void 0:r.sponsorLogo)&&o.jsxs(je,{children:[o.jsx(be,{alt:"sponsor-logo",src:(d=(l=n==null?void 0:n.titleCard)==null?void 0:l.media)==null?void 0:d.sponsorLogo}),o.jsx(Ie,{children:"PRESENTS"})]}),((u=n==null?void 0:n.titleCard)==null?void 0:u.title)&&o.jsx(Ee,{children:(a=n==null?void 0:n.titleCard)==null?void 0:a.title}),((v=n==null?void 0:n.titleCard)==null?void 0:v.subtitle)&&o.jsx(Ce,{children:(p=n==null?void 0:n.titleCard)==null?void 0:p.subtitle}),o.jsx(Ae,{onClick:t,children:"Play Now"})]})},E=[{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",tagline:"",headline:o.jsxs(o.Fragment,{children:["Welcome to ",o.jsx("br",{})," StreamLayer +"]})},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",headline:"Get real-time insights"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",headline:"Predictions, trivia & polls synced to match play"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",headline:"Win points for every answer you get right"},{graphicSrc:"https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",headline:"Compete against friends on the leaderboard"}],we=s.styled_default("div")({name:"OnboardingContainer",class:"o1xni1kr",propsAsIs:!1}),Le=()=>s.x$2,Te=s.styled_default(Le())({name:"OnboardingNotificationContainer",class:"o1vnouv7",propsAsIs:!0}),q=s.styled_default("div")({name:"InnerContainer",class:"i59uefw",propsAsIs:!1}),De=({deepLink:e,onboardingOpts:t,notification:n,gamification:i,loading:r,sdk:l})=>{var d,u,a,v,p,h,f;const x=s.useStore(i.friends.getStore()),[S,k]=c.useState(void 0),y=c.useMemo(()=>{var j,b;const A=l.getInviter();return A?(b=(j=x.data)==null?void 0:j.find(({slId:K})=>K===A))==null?void 0:b.name:""},[x.data,l]);return c.useEffect(()=>{const j=e.$store.subscribe(b=>{b&&k(b.data)});return()=>{j()}},[e.$store]),o.jsx(we,{children:o.jsx(s.rn,{loading:r,rules:[{label:"Answer as many questions as you like.",icon:"icon-btn-feature-groups"},{label:"Win points for each correct trivia or prediction answer.",icon:"icon-thumb-up"},{label:"Top the leader board and best your friends.",icon:"icon-trophy"}],rulesBtnLabel:(d=t.rules)==null?void 0:d.buttonLabel,rulesTitle:(u=t.rules)==null?void 0:u.heading,termsTitle:"Terms and Conditions",termsText:(a=t.rules)==null?void 0:a.terms,steps:E,primaryColor:(v=t.inviteCard)==null?void 0:v.iconColor,inviteLink:S,inviteCardTitle:(p=t.inviteCard)==null?void 0:p.heading,inviteCardSubtext:(h=t.inviteCard)==null?void 0:h.subtext,inviteCardBtnLabel:(f=t.inviteCard)==null?void 0:f.buttonLabel,onClose:()=>{var j;(j=n.close)==null||j.call(n)},gamification:i,sdk:l,inviterName:y})})},$e=({sdk:e,notification:t,saveHeight:n,style:i,appNode:r,sdkInDesktopView:l,responsiveStore:d})=>{const u=c.useRef(null),a=t.data.onboarding,[v,p]=c.useState(a==null?void 0:a.instantOpen),h=e.getFeature(g.SdkOverlayType.GAMES),f=c.useMemo(()=>E==null?void 0:E.map(({graphicSrc:y})=>y),[]),{screen:x}=s.useStore(d,{keys:["screen"]});c.useLayoutEffect(()=>{var y;n(((y=u.current)==null?void 0:y.getBoundingClientRect().height)||0)},[n]);const{loading:S,throttled:k}=s.I$1(f);return v&&h&&a&&r.current&&!k?o.jsx(s.x$1,{container:r,useContainer:!l,children:o.jsx(De,{notification:t,setOpened:p,gamification:h,onboardingOpts:a,deepLink:h.deepLink,loading:S,renderToNode:r,sdk:e})}):o.jsxs(o.Fragment,{children:[o.jsx(q,{ref:u,style:{position:"absolute",visibility:"hidden"},children:o.jsx(V,{close:()=>{},action:()=>{},onboarding:a})}),o.jsx(Te,{style:i,hiding:t.hiding,children:o.jsx(q,{children:o.jsx(V,{close:t.close,action:()=>{var y;p(!0),(((y=r.current)==null?void 0:y.getBoundingClientRect().y)||0)<0&&s.C$2(r,x.size,{behavior:"smooth"})},onboarding:a})})})]})},Oe=()=>s.x$2,_e=s.styled_default(Oe())({name:"Container",class:"c8ol1ve",propsAsIs:!0}),M=s.styled_default("div")({name:"InnerContainer",class:"iqfywam",propsAsIs:!1}),Re=()=>M,Ve=s.styled_default(Re())({name:"HiddenContainer",class:"hokmtod",propsAsIs:!0}),qe=s.styled_default("div")({name:"NotificationRefreshing",class:"n192d1q8",propsAsIs:!1}),Fe=()=>s.h,Me=s.styled_default(Fe())({name:"Pill",class:"p1lha68t",propsAsIs:!0}),Pe=e=>{const[t,n]=c.useState(0),i=c.useRef(null),r=c.useCallback(d=>{i.current=d},[]);c.useEffect(()=>{var d;const u=(d=i.current)==null?void 0:d.getBoundingClientRect();u&&n(u.height)},[e]);const l=c.useCallback(d=>{n(d)},[]);return[r,t,l]},Qe=({sdk:e,notification:t,appNode:n,responsiveStore:i})=>{var r,l;const{sdkInDesktopView:d}=s.useStore(i,{keys:["sdkInDesktopView"]}),{sdk:u}=C(),[a,v,p]=Pe(t.id);return t.type===s.NotificationType.QUESTION?o.jsxs(o.Fragment,{children:[o.jsx(Ve,{ref:a,children:o.jsx(s.k$1,{...t})}),o.jsxs(_e,{style:{height:t.hiding?0:v},hiding:t.hiding,children:[o.jsx(M,{style:{height:"100%"},children:o.jsx(s.k$1,{...t,controlVideo:u==null?void 0:u.controlVideoPlayer})}),o.jsx(qe,{},t.id)]})]}):t.type===s.NotificationType.QUESTION_RESOLVED&&(l=(r=t.data)==null?void 0:r.question)!=null&&l.predictionResult?o.jsx(s.q,{style:{height:t.hiding?0:v},saveHeight:p,close:t.close,hiding:t.hiding,...t.data.question}):t.type===s.NotificationType.ONBOARDING?o.jsx($e,{style:{height:t.hiding?0:v},saveHeight:p,sdk:e,notification:t,sdkInDesktopView:d,appNode:n,responsiveStore:i}):null},Ke="p7vfi6t",Ue=({pill:e,setPill:t,appNode:n,headerNode:i,scrollNode:r,responsiveStore:l,scrollStore:d})=>{var u,a;const{screen:v}=s.useStore(l,{keys:["screen"]}),{tabsShown:p,scrollPosition:h}=s.useStore(d,{keys:["tabsShown","scrollPosition"]});c.useEffect(()=>{l.get().sdkInDesktopView?h<50&&t(null):h>-50&&t(null)},[h,l,t]);const f=l.get().sdkInDesktopView?n:i;return!e||!f.current?null:s.Ik.createPortal(o.jsx(Me,{title:e.type===s.NotificationType.QUESTION_RESOLVED?"Prediction result":`New ${((a=s.o[(u=e.data)==null?void 0:u.questionType])==null?void 0:a.label)||"notification"}`,onClick:()=>{var x;l.get().sdkInDesktopView?(x=r.current)==null||x.scrollTo({top:0,behavior:"smooth"}):s.C$2(n,v.size,{behavior:"smooth"}),t(null)},className:s.cx_default(p&&Ke,"sl-pill-button")}),f.current)},ze=({sdk:e,headerNode:t,scrollNode:n,responsiveStore:i,appNode:r,scrollStore:l})=>{const[d]=c.useState(e.getNotificationsStore()),u=s.useStore(d),[a,v]=c.useState(null),p=c.useMemo(()=>e.getActiveNotification(),[e,u]);return c.useEffect(()=>{p&&s.eventBus.emit("notification",{action:"rendered",payload:{questionId:p.data.questionId,questionType:p.data.questionType}})},[p]),c.useEffect(()=>{p&&(i.get().sdkInDesktopView||i.get().sdkInView)&&(!i.get().sdkInDesktopView&&i.get().sdkInView&&v(p),i.get().sdkInDesktopView&&window.requestAnimationFrame(()=>{l.get().scrollPosition!==0&&v(p)}))},[p]),c.useEffect(()=>{p||v(null)},[p]),o.jsxs(o.Fragment,{children:[!a&&p&&o.jsx(Qe,{headerNode:t,appNode:r,sdk:e,notification:p,responsiveStore:i}),a&&o.jsx(Ue,{pill:a,setPill:v,appNode:r,notification:p,headerNode:t,scrollNode:n,scrollStore:l,responsiveStore:i})]})},P=e=>{const t=c.useRef(""),[n,i]=c.useState(!1),r=s.useStore(e.status),l=s.useStore(e.sdkStore.slStreamId),d=s.useStore(e.userId()),u=s.useStore(e.getActiveFeature()),a=r==="ready"&&!!l.data;c.useEffect(()=>{const h=e.getFeature(g.SdkOverlayType.GAMES);h&&(h.closeQuestion(),h.closeUser())},[u,e]);const v=c.useCallback(h=>{t.current=h,i(!0),e.initializeApp({skipOrganizationSettings:!0}).then(({enabled:f,err:x})=>{if(!x&&f){e.isUserAuthorized().then(S=>{S||e.disableApp()});return}})},[e]),p=c.useCallback(()=>{i(!1),e.disableApp()},[e]);return c.useEffect(()=>{if(!d){a&&e.disableApp();return}if(d&&t.current&&n){e.initializeApp({skipOrganizationSettings:!0}).then(()=>{e.createEventSession(t.current)});return}},[d]),c.useEffect(()=>()=>{i(!1),e.disableApp()},[i,e]),{sdkEnabled:n,sdkReady:a,activateEventWithId:v,deactivate:p,isLogged:!!d}},Be=({sdk:e,className:t,scrollStore:n,appNode:i,scrollNode:r,responsiveStore:l})=>{const[,d]=s.p$1(e);return o.jsx(he,{className:t,scrollNode:r,appNode:i,scrollStore:n,feature:d,responsiveStore:l,sdk:e})},We=({sdk:e,className:t,appNode:n,responsiveStore:i})=>{const r=s.useStore(e.featuresList.getStore());return r?Array.from(r,l=>{const d=e.getFeature(l);return d?o.jsx(ge,{className:t,appNode:n,feature:d,responsiveStore:i,sdk:e},l):null}):null},Ge=({sdk:e,event:t})=>{const n=c.useRef(null),i=c.useRef(null),[r]=s.v(n),[l,d]=s.D(n,r),{sdkEnabled:u,sdkReady:a,activateEventWithId:v,deactivate:p,isLogged:h}=P(e);c.useEffect(()=>{t?(e.createEventSession(t),v(t)):p()},[t,v,p,e]),s.L(n,{enabled:u,event:"click",listener:s.b$1}),s.L(l,{enabled:u,event:"scrollend",listener:s.y,useDomNode:!0}),s.L(l,{enabled:u,event:"click",listener:s.w,useDomNode:!0});const f=c.useMemo(()=>({sdk:e}),[e]);return c.useEffect(()=>{Promise.resolve().then(()=>require("./gamification-feature.js"))},[]),o.jsx(F.Provider,{value:f,children:o.jsxs(s.i$1,{ref:n,children:[u&&o.jsx(ye,{className:s.f,sdk:e,ref:i}),o.jsxs(s.c,{className:"sl-hide-on-modal",ref:l,"data-nav":u.toString(),children:[a&&o.jsx(ze,{sdk:e,scrollNode:l,headerNode:i,appNode:n,scrollStore:d,responsiveStore:r}),a&&o.jsx(Be,{scrollStore:d,responsiveStore:r,scrollNode:l,appNode:n,className:s.f,sdk:e}),a&&o.jsx(We,{responsiveStore:r,appNode:n,className:s.f,sdk:e})]}),u&&!h&&o.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:"You are not logged in."})]})})},Q=({children:e,style:t})=>o.jsx("div",{className:"StreamLayerSDKTheme",children:o.jsx("div",{className:s.x$3,style:t,children:e})}),He=()=>{const{sdk:e}=c.useContext(s.StreamLayerContext);return e},Xe=({event:e})=>{const{sdk:t,status:n}=c.useContext(s.StreamLayerContext);if(n===s.StreamLayerStatus.UNSET)throw new Error("Wrap app in `StreamLayerProvider`");return n===s.StreamLayerStatus.CONNECTED?o.jsx("div",{className:"StreamLayerSDK",children:"wait"}):t===null?o.jsx("div",{className:"StreamLayerSDK",children:"sdk not initialized"}):o.jsx("div",{className:"StreamLayerSDK",children:o.jsx(Q,{children:o.jsx(Ge,{sdk:t,event:e})})})};exports.E=ue;exports.F=P;exports.StreamLayerSDKReact=Xe;exports.i=Q;exports.useStreamLayer=He;
|