@streamlayer/react 1.20.6 → 1.21.0

package/lib/dist/es/gamification-feature2.js

@@ -1,209 +1,216 @@
-import { jsx as s, jsxs as p, Fragment as $ } from "react/jsx-runtime";
-import { A as C, s as t, B as b, f as M, I as D, a as L, b as T, c as E, M as P, u as m, T as R, p as F, k as z, z as B, d as U, l as O, e as j, S as q, m as H, g as V, n as Q, h as K } from "./masters.js";
-import { useCallback as W, useRef as _, useState as y, useEffect as f } from "react";
-const G = (e, n, a) => {
-  const r = n >= C.lg && n < C.xl ? 75 : 52;
+import { jsx as s, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { A as C, s as r, B as b, f as M, I as D, a as L, b as T, M as E, u as m, T as P, p as R, k as F, z, c as B, l as U, d as O, S as j, m as q, e as H, n as V, g as Q } from "./masters.js";
+import "@nanostores/react";
+import { useCallback as K, useRef as W, useState as S, useEffect as f } from "react";
+import "nanostores";
+import "react-countdown-circle-timer";
+import "react-dom";
+import "react-countup";
+import "lodash.throttle";
+import _ from "react-infinite-scroller";
+const G = (e, a, t) => {
+  const o = a >= C.lg && a < C.xl ? 75 : 52;
   e.current && window.scrollTo({
-    top: e.current.offsetTop - r,
-    ...a
+    top: e.current.offsetTop - o,
+    ...t
   });
-}, J = /* @__PURE__ */ t("div")({
+}, J = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "c115qtkr",
   propsAsIs: !1
-}), X = /* @__PURE__ */ t("div")({
+}), X = /* @__PURE__ */ r("div")({
   name: "STabs",
   class: "sxnslc8",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ t("button")({
+}), Y = /* @__PURE__ */ r("button")({
   name: "Button",
   class: "b1umzux0",
   propsAsIs: !1
-}), Z = /* @__PURE__ */ t("span")({
+}), Z = /* @__PURE__ */ r("span")({
   name: "Title",
   class: "tspsaas",
   propsAsIs: !1
 });
 var v = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(v || {});
-const S = ({ title: e, active: n, onClick: a }) => /* @__PURE__ */ s(Y, { "data-a": "intr", onClick: a, "data-selected": n, children: /* @__PURE__ */ s(Z, { "data-a": "intr", children: e }) }), ee = ({ activePage: e = "home", toggleActivePage: n }) => /* @__PURE__ */ s(J, { children: /* @__PURE__ */ p(X, { "data-position": e === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ s(S, { title: "Home", active: e === "home", onClick: () => n(
+const $ = ({ title: e, active: a, onClick: t }) => /* @__PURE__ */ s(Y, { "data-a": "intr", onClick: t, "data-selected": a, children: /* @__PURE__ */ s(Z, { "data-a": "intr", children: e }) }), ee = ({ activePage: e = "home", toggleActivePage: a }) => /* @__PURE__ */ s(J, { children: /* @__PURE__ */ p(X, { "data-position": e === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ s($, { title: "Home", active: e === "home", onClick: () => a(
     "home"
     /* HOME */
   ) }),
   /* @__PURE__ */ s(
-    S,
+    $,
     {
       title: "Friends",
       active: e === "leaderboard",
-      onClick: () => n(
+      onClick: () => a(
         "leaderboard"
         /* LEADERBOARD */
       )
     }
   )
-] }) }), se = /* @__PURE__ */ t("div")({
+] }) }), se = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "c1ux29ft",
   propsAsIs: !1
-}), ae = () => b, ne = /* @__PURE__ */ t(ae())({
+}), te = () => b, ae = /* @__PURE__ */ r(te())({
   name: "FriendsIcon",
   class: "f10ncfg2",
   propsAsIs: !0
-}), te = /* @__PURE__ */ t("div")({
+}), re = /* @__PURE__ */ r("div")({
   name: "Content",
   class: "c1yc07bd",
   propsAsIs: !1
-}), re = /* @__PURE__ */ t("div")({
+}), oe = /* @__PURE__ */ r("div")({
   name: "Title",
   class: "tj6cq7w",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ t("div")({
+}), ne = /* @__PURE__ */ r("div")({
   name: "Description",
   class: "d1ag78xo",
   propsAsIs: !1
-}), ie = () => b, ce = /* @__PURE__ */ t(ie())({
+}), ie = () => b, ce = /* @__PURE__ */ r(ie())({
   name: "ArrowInviteIcon",
   class: "awohrz6",
   propsAsIs: !0
-}), le = ({ title: e, description: n, onClick: a, className: r }) => {
-  const [o] = M({
+}), le = ({ title: e, description: a, onClick: t, className: o }) => {
+  const [n] = M({
     type: "invitation",
     action: "sent",
     payload: {
       from: D.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ p(se, { "data-a": "intr", onClick: o(a), className: r, children: [
-    /* @__PURE__ */ s(ne, { name: "icon-friends" }),
-    /* @__PURE__ */ p(te, { children: [
-      /* @__PURE__ */ s(re, { children: e }),
-      /* @__PURE__ */ s(oe, { children: n })
+  return /* @__PURE__ */ p(se, { "data-a": "intr", onClick: n(t), className: o, children: [
+    /* @__PURE__ */ s(ae, { name: "icon-friends" }),
+    /* @__PURE__ */ p(re, { children: [
+      /* @__PURE__ */ s(oe, { children: e }),
+      /* @__PURE__ */ s(ne, { children: a })
     ] }),
     /* @__PURE__ */ s(ce, { name: "icon-copy" })
   ] });
-}, de = /* @__PURE__ */ t("div")({
+}, de = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "culdu4a",
   propsAsIs: !1
-}), pe = /* @__PURE__ */ t("div")({
+}), pe = /* @__PURE__ */ r("div")({
   name: "Position",
   class: "pwf8e69",
   propsAsIs: !1
-}), me = /* @__PURE__ */ t("img")({
+}), me = /* @__PURE__ */ r("img")({
   name: "Avatar",
   class: "atf4yh4",
   propsAsIs: !1
-}), ue = /* @__PURE__ */ t("div")({
+}), ue = /* @__PURE__ */ r("div")({
   name: "AvatarPlaceholder",
   class: "a1dg29ja",
   propsAsIs: !1
-}), he = /* @__PURE__ */ t("div")({
+}), he = /* @__PURE__ */ r("div")({
   name: "Content",
   class: "c10a68rc",
   propsAsIs: !1
-}), ve = /* @__PURE__ */ t("div")({
+}), ve = /* @__PURE__ */ r("div")({
   name: "NameContainer",
   class: "nc4kck5",
   propsAsIs: !1
-}), Ie = /* @__PURE__ */ t("span")({
+}), Ie = /* @__PURE__ */ r("span")({
   name: "Name",
   class: "njsrqgr",
   propsAsIs: !1
-}), ge = () => b, fe = /* @__PURE__ */ t(ge())({
+}), ge = () => b, fe = /* @__PURE__ */ r(ge())({
   name: "CurrentUserBadge",
   class: "c17uc4zr",
   propsAsIs: !0
 }), be = ({
   friendsRank: e,
-  avatar: n,
-  name: a,
-  userId: r,
-  points: o,
+  avatar: a,
+  name: t,
+  userId: o,
+  points: n,
   isCurrentUser: i,
   style: d
-}) => /* @__PURE__ */ p(de, { "data-name": r, style: d, children: [
+}) => /* @__PURE__ */ p(de, { "data-name": o, style: d, children: [
   /* @__PURE__ */ s(pe, { children: e || 0 }),
   /* @__PURE__ */ p(he, { children: [
-    n ? /* @__PURE__ */ s(me, { alt: "leaderboard-item-avatar", src: n }) : /* @__PURE__ */ s(ue, { children: L(a || "") }),
+    a ? /* @__PURE__ */ s(me, { alt: "leaderboard-item-avatar", src: a }) : /* @__PURE__ */ s(ue, { children: L(t || "") }),
     /* @__PURE__ */ p(ve, { children: [
-      /* @__PURE__ */ s(Ie, { children: a || "" }),
+      /* @__PURE__ */ s(Ie, { children: t || "" }),
       i && /* @__PURE__ */ s(fe, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ s("div", { children: T(o) })
-] }), Ae = /* @__PURE__ */ t("div")({
+  /* @__PURE__ */ s("div", { children: T(n) })
+] }), Ae = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "c16btbfp",
   propsAsIs: !1
 }), ke = ({
   items: e,
-  currentUserId: n,
-  openItemDetail: a,
-  fetchMore: r,
-  scrollNode: o,
+  currentUserId: a,
+  openItemDetail: t,
+  fetchMore: o,
+  scrollNode: n,
   hasMore: i
 }) => {
-  const d = W((c) => {
+  const d = K((c) => {
     const l = c.target.getAttribute("data-name");
-    l && a(l);
-  }, [a]);
-  return /* @__PURE__ */ s(E, {
-    loadMore: r,
+    l && t(l);
+  }, [t]);
+  return /* @__PURE__ */ s(_, {
+    loadMore: o,
     initialLoad: !1,
     hasMore: i,
     useWindow: !1,
-    getScrollParent: () => o.current,
+    getScrollParent: () => n.current,
     children: /* @__PURE__ */ s(Ae, {
       "data-a": "intr",
       onClick: d,
       children: e.map((c) => /* @__PURE__ */ s(be, {
         ...c,
-        isCurrentUser: !!n && n === c.userId
+        isCurrentUser: !!a && a === c.userId
       }, c.userId))
     })
   });
-}, Ce = /* @__PURE__ */ t("div")({
+}, Ce = /* @__PURE__ */ r("div")({
   name: "InviteFriendsContainer",
   class: "i1c9dygq",
   propsAsIs: !1
-}), Se = ({
+}), $e = ({
   deepLink: e
 }) => /* @__PURE__ */ s(Ce, {
-  children: /* @__PURE__ */ s(P, {
+  children: /* @__PURE__ */ s(E, {
     inviteLink: e,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
   })
-}), $e = /* @__PURE__ */ t("div")({
+}), ye = /* @__PURE__ */ r("div")({
   name: "InviteLinkContainer",
   class: "i1odbhm4",
   propsAsIs: !1
-}), ye = ({
+}), Se = ({
   gamification: e,
-  scrollNode: n,
-  scrollStore: a
+  scrollNode: a,
+  scrollStore: t
 }) => {
-  const r = _(null), {
-    data: o,
+  const o = W(null), {
+    data: n,
     hasMore: i,
     loading: d,
     key: c
   } = m(e.leaderboardList.$store), {
     data: l
-  } = m(e.deepLink.$store), [u, I] = R(r);
-  return !o.length && !d ? /* @__PURE__ */ s(Se, {
+  } = m(e.deepLink.$store), [u, I] = P(o);
+  return !n.length && !d ? /* @__PURE__ */ s($e, {
     deepLink: l
-  }) : /* @__PURE__ */ p($, {
+  }) : /* @__PURE__ */ p(y, {
     children: [/* @__PURE__ */ s(ke, {
-      items: o,
-      scrollNode: n,
-      scrollStore: a,
+      items: n,
+      scrollNode: a,
+      scrollStore: t,
       fetchMore: e.leaderboardList.fetchMore,
       hasMore: i,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
-    }, c), l && /* @__PURE__ */ s($e, {
-      ref: r,
+    }, c), l && /* @__PURE__ */ s(ye, {
+      ref: o,
       children: /* @__PURE__ */ s(le, {
         "data-a": "intr",
         onClick: () => u(l),
@@ -212,40 +219,40 @@ const S = ({ title: e, active: n, onClick: a }) => /* @__PURE__ */ s(Y, { "data-
       })
     }), I]
   });
-}, Ne = ({ store: e, openQuestion: n }) => {
-  const { sdk: a } = F(), r = m(e);
-  return /* @__PURE__ */ s(z, { openQuestion: n, questions: r.data, controlVideo: a == null ? void 0 : a.controlVideoPlayer });
+}, Ne = ({ store: e, openQuestion: a }) => {
+  const { sdk: t } = R(), o = m(e);
+  return /* @__PURE__ */ s(F, { openQuestion: a, questions: o.data, controlVideo: t == null ? void 0 : t.controlVideoPlayer });
 }, we = ({ userSummary: e }) => {
-  var n;
-  const [a, r] = y(void 0);
+  var a;
+  const [t, o] = S(void 0);
   return f(() => {
-    const o = e.$store.subscribe((i) => {
-      i && r(i);
+    const n = e.$store.subscribe((i) => {
+      i && o(i);
     });
     return () => {
-      o();
+      n();
     };
-  }, [e]), /* @__PURE__ */ s(B, { loading: !(a != null && a.summary), ...a == null ? void 0 : a.summary, successRate: (n = a == null ? void 0 : a.percentage) == null ? void 0 : n.correct });
-}, xe = ({ gamification: e, className: n, scrollStore: a, scrollNode: r, appNode: o, style: i, responsiveStore: d }) => {
-  const { tabsShown: c } = m(a, { keys: ["tabsShown"] }), l = m(e.friendsTabEnabled), [u, I] = y(v.HOME), [, N] = U(), { sdkInDesktopView: A, screen: w } = m(d, { keys: ["sdkInDesktopView"] }), x = (h) => {
+  }, [e]), /* @__PURE__ */ s(z, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (a = t == null ? void 0 : t.percentage) == null ? void 0 : a.correct });
+}, xe = ({ gamification: e, className: a, scrollStore: t, scrollNode: o, appNode: n, style: i, responsiveStore: d }) => {
+  const { tabsShown: c } = m(t, { keys: ["tabsShown"] }), l = m(e.friendsTabEnabled), [u, I] = S(v.HOME), [, N] = B(), { sdkInDesktopView: A, screen: w } = m(d, { keys: ["sdkInDesktopView"] }), x = (h) => {
     N(() => {
       var k;
-      I(h), A === !1 && (((k = o.current) == null ? void 0 : k.getBoundingClientRect().y) || 0) < 0 && G(o, w.size, { behavior: "instant" });
+      I(h), A === !1 && (((k = n.current) == null ? void 0 : k.getBoundingClientRect().y) || 0) < 0 && G(n, w.size, { behavior: "instant" });
     });
   };
-  f(() => a.subscribe((h) => {
+  f(() => t.subscribe((h) => {
     if (h.scrollPosition === 0) {
-      a.setKey("tabsShown", !0);
+      t.setKey("tabsShown", !0);
       return;
     }
-    d.get().sdkInDesktopView ? a.setKey("tabsShown", h.scrollDirection === "backward") : a.setKey("tabsShown", h.scrollDirection === "forward");
-  }), [a, d]), f(() => {
+    d.get().sdkInDesktopView ? t.setKey("tabsShown", h.scrollDirection === "backward") : t.setKey("tabsShown", h.scrollDirection === "forward");
+  }), [t, d]), f(() => {
     l || I(v.HOME);
   }, [l]);
   let g = "0px";
-  return A ? g = c ? "0px" : "calc(0px - var(--header-height))" : g = c ? "var(--header-height)" : "0px", /* @__PURE__ */ p(O, { className: j(n, "SL-Tabs", "sl-hide-on-modal"), style: i, children: [
+  return A ? g = c ? "0px" : "calc(0px - var(--header-height))" : g = c ? "var(--header-height)" : "0px", /* @__PURE__ */ p(U, { className: O(a, "SL-Tabs", "sl-hide-on-modal"), style: i, children: [
     l && /* @__PURE__ */ s(
-      q,
+      j,
       {
         style: {
           top: g
@@ -253,27 +260,27 @@ const S = ({ title: e, active: n, onClick: a }) => /* @__PURE__ */ s(Y, { "data-
         children: /* @__PURE__ */ s(ee, { activePage: u, toggleActivePage: x })
       }
     ),
-    u === v.HOME && /* @__PURE__ */ p($, { children: [
-      /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(we, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ s(Q, { style: { flex: 1 }, children: /* @__PURE__ */ s(Ne, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+    u === v.HOME && /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(we, { userSummary: e.userSummary }) }) }),
+      /* @__PURE__ */ s(V, { style: { flex: 1 }, children: /* @__PURE__ */ s(Ne, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
     ] }),
-    u === v.LEADERBOARD && /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(ye, { scrollStore: a, scrollNode: r, gamification: e }) })
+    u === v.LEADERBOARD && /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(Se, { scrollStore: t, scrollNode: o, gamification: e }) })
   ] });
-}, Te = ({
+}, Ue = ({
   gamification: e,
-  scrollStore: n,
-  className: a,
-  appNode: r,
-  scrollNode: o,
+  scrollStore: a,
+  className: t,
+  appNode: o,
+  scrollNode: n,
   responsiveStore: i
 }) => /* @__PURE__ */ s(xe, {
-  appNode: r,
-  scrollStore: n,
-  scrollNode: o,
-  className: a,
+  appNode: o,
+  scrollStore: a,
+  scrollNode: n,
+  className: t,
   gamification: e,
   responsiveStore: i
 });
 export {
-  Te as default
+  Ue as default
 };

package/lib/dist/es/index.js

@@ -1,11 +1,16 @@
 import "react/jsx-runtime";
-import { i as s, o, q as m, t as S, j as i, r as L } from "./masters.js";
+import "lodash.throttle";
 import "react";
+import "@nanostores/react";
+import "nanostores";
+import { h as S, j as L, o as y, r as n, i as P, q as c } from "./masters.js";
+import "react-dom";
+import "react-countup";
 export {
-  s as BetPackStandalone,
-  o as MastersStreamLayerProvider,
-  m as MastersStreamLayerSDKReact,
-  S as StreamLayerLogin,
-  i as StreamLayerSDKPoints,
-  L as useStreamLayer
+  S as BetPackStandalone,
+  L as MastersStreamLayerProvider,
+  y as MastersStreamLayerSDKReact,
+  n as StreamLayerLogin,
+  P as StreamLayerSDKPoints,
+  c as useStreamLayer
 };