@streamlayer/react-ui 1.20.0 → 1.21.0

package/lib/app/masters/Notifications/Onboarding/index.js

@@ -41,26 +41,26 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   propsAsIs: !1
 }), q = ({
   deepLink: l,
-  onboardingOpts: r,
+  onboardingOpts: C,
   notification: i,
-  gamification: c,
+  gamification: p,
   loading: s,
   sdk: a
 }) => {
-  var d, o, m, h, g, V, L;
-  const p = x(c.friends.getStore()), [u, e] = I(void 0), f = S(() => {
-    var n, b;
-    const C = a.getInviter();
-    return C ? (b = (n = p.data) == null ? void 0 : n.find(({
+  var o, m, h, g, V, L, n;
+  const d = x(p.friends.getStore()), [e, f] = I(void 0), u = S(() => {
+    var c, b;
+    const r = a.getInviter();
+    return r ? (b = (c = d.data) == null ? void 0 : c.find(({
       slId: k
-    }) => k === C)) == null ? void 0 : b.name : "";
-  }, [p.data, a]);
+    }) => k === r)) == null ? void 0 : b.name : "";
+  }, [d.data, a]);
   return B(() => {
-    const C = l.$store.subscribe((n) => {
-      n && e(n.data);
+    const r = l.$store.subscribe((c) => {
+      c && f(c.data);
     });
     return () => {
-      C();
+      r();
     };
   }, [l.$store]), /* @__PURE__ */ t(W, {
     children: /* @__PURE__ */ t(E, {
@@ -75,45 +75,44 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (d = r.rules) == null ? void 0 : d.buttonLabel,
-      rulesTitle: (o = r.rules) == null ? void 0 : o.heading,
+      rulesBtnLabel: (o = C.rules) == null ? void 0 : o.buttonLabel,
+      rulesTitle: (m = C.rules) == null ? void 0 : m.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (m = r.rules) == null ? void 0 : m.terms,
+      termsText: (h = C.rules) == null ? void 0 : h.terms,
       steps: H,
-      primaryColor: (h = r.inviteCard) == null ? void 0 : h.iconColor,
-      inviteLink: u,
-      inviteCardTitle: (g = r.inviteCard) == null ? void 0 : g.heading,
-      inviteCardSubtext: (V = r.inviteCard) == null ? void 0 : V.subtext,
-      inviteCardBtnLabel: (L = r.inviteCard) == null ? void 0 : L.buttonLabel,
+      primaryColor: (g = C.inviteCard) == null ? void 0 : g.iconColor,
+      inviteLink: e,
+      inviteCardTitle: (V = C.inviteCard) == null ? void 0 : V.heading,
+      inviteCardSubtext: (L = C.inviteCard) == null ? void 0 : L.subtext,
+      inviteCardBtnLabel: (n = C.inviteCard) == null ? void 0 : n.buttonLabel,
       onClose: () => {
-        var C;
-        (C = i.close) == null || C.call(i);
+        var r;
+        (r = i.close) == null || r.call(i);
       },
-      gamification: c,
+      gamification: p,
       sdk: a,
-      inviterName: f
+      inviterName: u
     })
   });
 }, r2 = ({
   sdk: l,
-  notification: r,
+  notification: C,
   saveHeight: i,
-  style: c,
+  style: p,
   appNode: s,
-  sdkInDesktopView: a,
-  responsiveStore: p
+  responsiveStore: a
 }) => {
   var L;
-  const u = A(null), e = r.data.onboarding, [f, d] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
-    graphicSrc: C
-  }) => C), []), {
+  const d = A(null), e = C.data.onboarding, [f, u] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
+    graphicSrc: n
+  }) => n), []), {
     screen: h
-  } = x(p, {
+  } = x(a, {
     keys: ["screen"]
   });
   (L = e == null ? void 0 : e.titleCard) != null && L.media && (e.titleCard.media.sponsorLogo = R), _(() => {
-    var C;
-    i(((C = u.current) == null ? void 0 : C.getBoundingClientRect().height) || 0);
+    var n;
+    i(((n = d.current) == null ? void 0 : n.getBoundingClientRect().height) || 0);
   }, [i]);
   const {
     loading: g,
@@ -121,10 +120,10 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   } = T(m);
   return f && o && e && s.current && !V ? /* @__PURE__ */ t(G, {
     container: s,
-    useContainer: !a,
+    useContainer: !1,
     children: /* @__PURE__ */ t(q, {
-      notification: r,
-      setOpened: d,
+      notification: C,
+      setOpened: u,
       gamification: o,
       onboardingOpts: e,
       deepLink: o.deepLink,
@@ -133,7 +132,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
     })
   }) : /* @__PURE__ */ Z(w, {
     children: [/* @__PURE__ */ t(y, {
-      ref: u,
+      ref: d,
       style: {
         position: "absolute",
         visibility: "hidden"
@@ -146,14 +145,14 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         onboarding: e
       })
     }), /* @__PURE__ */ t(O, {
-      style: c,
-      hiding: r.hiding,
+      style: p,
+      hiding: C.hiding,
       children: /* @__PURE__ */ t(y, {
         children: /* @__PURE__ */ t(M, {
-          close: r.close,
+          close: C.close,
           action: () => {
-            var n;
-            d(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
+            var r;
+            u(!0), (((r = s.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
               behavior: "smooth"
             });
           },

package/lib/app/masters/Notifications/index.js

@@ -1,82 +1,77 @@
-import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
+import { jsxs as g, Fragment as V, jsx as c } from "react/jsx-runtime";
+import { cx as D } from "@linaria/core";
 import { useMastersContext as T } from "../useMastersContext.js";
 import { scrollIntoAppView as q } from "../useSdkScroll.js";
-import { useState as p, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
+import { useState as f, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
 import { r as b } from "../../../index-DALxy-8N.js";
-import { useStore as g } from "@streamlayer/react-polyfills";
+import { useStore as p } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
-import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
+import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
 import { Onboarding as x } from "./Onboarding/index.js";
 import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
 const j = (n) => {
-  const [t, u] = p(0), i = O(null), d = w((r) => {
-    i.current = r;
+  const [t, u] = f(0), i = O(null), l = w((o) => {
+    i.current = o;
   }, []);
   h(() => {
-    var l;
-    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
-    r && u(r.height);
+    var d;
+    const o = (d = i.current) == null ? void 0 : d.getBoundingClientRect();
+    o && u(o.height);
   }, [n]);
-  const o = w((r) => {
-    u(r);
+  const r = w((o) => {
+    u(o);
   }, []);
-  return [d, t, o];
+  return [l, t, r];
 }, z = ({
   sdk: n,
   notification: t,
   appNode: u,
   responsiveStore: i
 }) => {
-  var s, e;
+  var m, s;
   const {
-    sdkInDesktopView: d
-  } = g(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    sdk: o
-  } = T(), [r, l, m] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+    sdk: l
+  } = T(), [r, o, d] = j(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ g(V, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
-      children: /* @__PURE__ */ c(V, {
+      children: /* @__PURE__ */ c(N, {
         ...t
       })
-    }), /* @__PURE__ */ f(B, {
+    }), /* @__PURE__ */ g(B, {
       style: {
-        height: t.hiding ? 0 : l
+        height: t.hiding ? 0 : o
       },
       hiding: t.hiding,
       children: [/* @__PURE__ */ c(H, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(V, {
+        children: /* @__PURE__ */ c(N, {
           ...t,
-          controlVideo: o == null ? void 0 : o.controlVideoPlayer
+          controlVideo: l == null ? void 0 : l.controlVideoPlayer
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === a.QUESTION_RESOLVED && ((s = (m = t.data) == null ? void 0 : m.question) != null && s.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
   }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     sdk: n,
     notification: t,
-    sdkInDesktopView: d,
     appNode: u,
     responsiveStore: i
   }) : null;
@@ -85,47 +80,47 @@ const j = (n) => {
   setPill: t,
   appNode: u,
   headerNode: i,
-  scrollNode: d,
-  responsiveStore: o,
-  scrollStore: r
+  scrollNode: l,
+  responsiveStore: r,
+  scrollStore: o
 }) => {
-  var k, y;
+  var y, I;
   const {
-    screen: l
-  } = g(o, {
+    screen: d
+  } = p(r, {
     keys: ["screen"]
   }), {
     tabsShown: m,
     scrollPosition: s
-  } = g(r, {
+  } = p(o, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
-    o.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, o, t]);
-  const e = o.get().sdkInDesktopView ? u : i;
+    r.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
+  }, [s, r, t]);
+  const e = r.get().sdkInDesktopView ? u : i;
   return !n || !e.current ? null : b.createPortal(/* @__PURE__ */ c(U, {
-    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = n.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((I = R[(y = n.data) == null ? void 0 : y.questionType]) == null ? void 0 : I.label) || "notification"}`,
     onClick: () => {
-      var I;
-      o.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+      var k;
+      r.get().sdkInDesktopView ? (k = l.current) == null || k.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : q(u, l.size, {
+      }) : q(u, d.size, {
         behavior: "smooth"
       }), t(null);
     },
-    className: N(m && F, "sl-pill-button")
+    className: D(m && F, "sl-pill-button")
   }), e.current);
 }, it = ({
   sdk: n,
   headerNode: t,
   scrollNode: u,
   responsiveStore: i,
-  appNode: d,
-  scrollStore: o
+  appNode: l,
+  scrollStore: r
 }) => {
-  const [r] = p(n.getNotificationsStore()), l = g(r), [m, s] = p(null), e = E(() => n.getActiveNotification(), [n, l]);
+  const [o] = f(n.getNotificationsStore()), d = p(o), [m, s] = f(null), e = E(() => n.getActiveNotification(), [n, d]);
   return h(() => {
     e && C.emit("notification", {
       action: "rendered",
@@ -136,25 +131,25 @@ const j = (n) => {
     });
   }, [e]), h(() => {
     e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      o.get().scrollPosition !== 0 && s(e);
+      r.get().scrollPosition !== 0 && s(e);
     }));
   }, [e]), h(() => {
     e || s(null);
-  }, [e]), /* @__PURE__ */ f(D, {
+  }, [e]), /* @__PURE__ */ g(V, {
     children: [!m && e && /* @__PURE__ */ c(z, {
       headerNode: t,
-      appNode: d,
+      appNode: l,
       sdk: n,
       notification: e,
       responsiveStore: i
     }), m && /* @__PURE__ */ c(L, {
       pill: m,
       setPill: s,
-      appNode: d,
+      appNode: l,
       notification: e,
       headerNode: t,
       scrollNode: u,
-      scrollStore: o,
+      scrollStore: r,
       responsiveStore: i
     })]
   });

package/lib/app/masters/masters.js

@@ -19,35 +19,25 @@ import { StreamLayerMastersThemeProvider as se } from "../../ui/theme/masters.js
 const B = ({ sdk: e, className: t }) => {
   const [, r] = y(e);
   return /* @__PURE__ */ a(k, { className: t, feature: r, sdk: e });
-}, K = ({ sdk: e, className: t, appNode: r, responsiveStore: n }) => {
-  const s = c(e.featuresList.getStore());
-  return s ? Array.from(s, (o) => {
-    const i = e.getFeature(o);
-    return i ? /* @__PURE__ */ a(
-      z,
-      {
-        className: t,
-        appNode: r,
-        feature: i,
-        responsiveStore: n,
-        sdk: e
-      },
-      o
-    ) : null;
+}, K = ({ sdk: e, className: t, appNode: r }) => {
+  const o = c(e.featuresList.getStore());
+  return o ? Array.from(o, (n) => {
+    const s = e.getFeature(n);
+    return s ? /* @__PURE__ */ a(z, { className: t, appNode: r, feature: s, sdk: e }, n) : null;
   }) : null;
 }, O = (e) => {
-  const [t, r] = b(!S(v().size)), n = d(null);
+  const [t, r] = b(!S(v().size)), o = d(null);
   return p(() => {
-    const s = A(() => {
-      const o = v();
-      r(!S(o.size));
+    const n = A(() => {
+      const s = v();
+      r(!S(s.size));
     }, 200);
-    return window.addEventListener("resize", s), () => {
-      window.removeEventListener("resize", s);
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
     };
-  }, []), h(n, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(M, { ref: n, ...e, isMobile: t });
+  }, []), h(o, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(M, { ref: o, ...e, isMobile: t });
 }, R = ({ sdk: e }) => {
-  const t = d(null), r = c(e.status), n = c(e.sdkStore.slStreamId), s = d(null), [o] = D(t), [i, l] = x(t, o), m = r === "ready" && !!n.data;
+  const t = d(null), r = c(e.status), o = c(e.sdkStore.slStreamId), n = d(null), [s] = D(t), [i, l] = x(t, s), m = r === "ready" && !!o.data;
   return p(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
@@ -57,33 +47,33 @@ const B = ({ sdk: e, className: t }) => {
   }, [e]), h(t, { enabled: !0, event: "click", listener: F }), p(() => {
     import("./Features/Gamification/gamification-feature.js");
   }, []), /* @__PURE__ */ f(L, { ref: t, children: [
-    /* @__PURE__ */ a(C, { className: w(u, "sl-hide-on-modal"), ref: s }),
+    /* @__PURE__ */ a(C, { className: w(u, "sl-hide-on-modal"), ref: n }),
     /* @__PURE__ */ f(N, { "data-nav": !0, className: "sl-hide-on-modal", ref: i, children: [
       m && /* @__PURE__ */ a(
         P,
         {
           sdk: e,
           scrollNode: i,
-          headerNode: s,
+          headerNode: n,
           appNode: t,
           scrollStore: l,
-          responsiveStore: o
+          responsiveStore: s
         }
       ),
       m && /* @__PURE__ */ a(B, { className: u, sdk: e }),
-      m && /* @__PURE__ */ a(K, { responsiveStore: o, appNode: t, className: u, sdk: e })
+      m && /* @__PURE__ */ a(K, { appNode: t, className: u, sdk: e })
     ] })
   ] });
 }, re = ({ sdk: e, betPack: t }) => {
-  const [r, n] = b(t), o = !!c(e.userId()), i = E(() => ({ sdk: e }), [e]);
+  const [r, o] = b(t), s = !!c(e.userId()), i = E(() => ({ sdk: e }), [e]);
   return /* @__PURE__ */ f(g.Provider, { value: i, children: [
-    r && o && /* @__PURE__ */ a(
+    r && s && /* @__PURE__ */ a(
       O,
       {
         sdk: e,
-        onEvent: ({ type: l }) => l === "slOpenGameCenter" ? n(!1) : () => {
+        onEvent: ({ type: l }) => l === "slOpenGameCenter" ? o(!1) : () => {
         },
-        close: () => n(!1)
+        close: () => o(!1)
       }
     ),
     !r && /* @__PURE__ */ a(R, { sdk: e })

package/lib/app/masters/useOrientation.d.ts

@@ -0,0 +1,3 @@
+export declare const useOrientation: () => {
+    orientation: string;
+};

package/lib/app/masters/useOrientation.js

@@ -0,0 +1,12 @@
+import { useState as i, useEffect as o } from "react";
+const a = () => {
+  const [t, n] = i(""), e = () => {
+    window.screen.orientation.type.includes("landscape") || Math.abs(window.orientation) === 90 ? n("landscape") : n("portrait");
+  };
+  return o(() => (window.screen.orientation.addEventListener("change", e), window.addEventListener("orientationchange", e), e(), () => {
+    window.screen.orientation.removeEventListener("change", e), window.removeEventListener("orientationchange", e);
+  }), []), { orientation: t };
+};
+export {
+  a as useOrientation
+};