@streamlayer/react 1.12.0 → 1.13.0

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

@@ -1,4 +1,4 @@
-import { z as f } from "./masters.js";
+import { A as f } from "./masters.js";
 export {
   f as default
 };

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

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

package/lib/dist/es/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { B as s, h as o, j as m, o as S, q as i, i as L } from "./masters.js";
+import { B as s, i as o, o as m, q as S, t as i, j as L, r as y } from "./masters.js";
 import "react";
 export {
   s as BetPack,
@@ -7,5 +7,6 @@ export {
   m as MastersStreamLayerProvider,
   S as MastersStreamLayerSDKReact,
   i as StreamLayerLogin,
-  L as StreamLayerSDKPoints
+  L as StreamLayerSDKPoints,
+  y as useStreamLayer
 };