@streamlayer/react 0.24.10 → 0.25.1

package/lib/es/masters.js

@@ -0,0 +1,396 @@
+import { jsx as t, jsxs as c, Fragment as g } from "react/jsx-runtime";
+import { s as o, Y as y, o as E, X as w, f as C, x as Q, u as F, v as O, h as b, p as R, d as M, j as q, e as G, S as H, a as N, b as j } from "../provider-a6b36c89.js";
+import { useState as h, useMemo as B, useCallback as D, useEffect as L, useContext as P } from "react";
+import { QuestionType as T, FeatureType as A } from "@streamlayer/sdk-web-types";
+import { useStore as d } from "@nanostores/react";
+import { FeatureStatus as v } from "@streamlayer/sdk-web-interfaces";
+import "react-countdown-circle-timer";
+import "react-auth-code-input";
+import "react-phone-number-input";
+import "@connectrpc/connect";
+import "@connectrpc/connect-web";
+import "@streamlayer/sl-eslib/users/users_connect";
+import "@streamlayer/sdk-web-features";
+import "@streamlayer/sdk-web-api";
+import "@streamlayer/sdk-web-storage";
+import "@streamlayer/sdk-web-notifications";
+import "@streamlayer/sl-eslib/interactive/interactive.common_pb";
+import "@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb";
+import "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
+import "@streamlayer/sl-eslib/sports/events/events_connect";
+import "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
+import "./useStreamLayerApp.js";
+import "@streamlayer/sdk-web";
+const _ = ({
+  feature: e,
+  sdk: s,
+  children: n
+}) => {
+  const r = d(e.status), { slStreamId: a } = d(s.sdkStore);
+  return a != null && a.loading ? /* @__PURE__ */ t("div", { children: "event is loading..." }) : a != null && a.data ? r !== v.Ready ? /* @__PURE__ */ t("div", { children: "wait feature..." }) : n : /* @__PURE__ */ t("div", { children: "event is forbidden..." });
+};
+const z = () => x, Y = /* @__PURE__ */ o("div")({
+  name: "i",
+  class: "idhrx8x",
+  propsAsIs: !1
+}), $ = /* @__PURE__ */ o("div")({
+  name: "r",
+  class: "r1k6v4ep",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ o("div")({
+  name: "t",
+  class: "t1v8kucd",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ o(z())({
+  name: "o",
+  class: "o16yw7z1",
+  propsAsIs: !0
+});
+const X = /* @__PURE__ */ o("div")({
+  name: "n",
+  class: "n1aopxp8",
+  propsAsIs: !1
+}), K = ({
+  children: e,
+  style: s,
+  className: n
+}) => /* @__PURE__ */ t(X, {
+  style: s,
+  className: n,
+  children: e
+});
+const W = () => y, J = () => y, V = /* @__PURE__ */ o("div")({
+  name: "a",
+  class: "acysrl1",
+  propsAsIs: !1
+}), Z = /* @__PURE__ */ o("div")({
+  name: "l",
+  class: "lo57cjm",
+  propsAsIs: !1
+}), ee = /* @__PURE__ */ o(W())({
+  name: "p",
+  class: "p14kwh4y",
+  propsAsIs: !0
+}), se = /* @__PURE__ */ o("span")({
+  name: "s",
+  class: "sxun7sq",
+  propsAsIs: !1
+}), te = /* @__PURE__ */ o("button")({
+  name: "c",
+  class: "c1i8ida8",
+  propsAsIs: !1
+}), ne = /* @__PURE__ */ o(J())({
+  name: "g",
+  class: "g1m0xfmw",
+  propsAsIs: !0
+}), ae = ({ type: e, close: s }) => {
+  const n = E[e];
+  return /* @__PURE__ */ c(V, { children: [
+    /* @__PURE__ */ c(Z, { children: [
+      (n == null ? void 0 : n.iconName) && /* @__PURE__ */ t(ee, { name: n.iconName }),
+      (n == null ? void 0 : n.label) && /* @__PURE__ */ t(se, { children: n.label })
+    ] }),
+    /* @__PURE__ */ t(te, { onClick: s, children: /* @__PURE__ */ t(ne, { name: "icon-cross" }) })
+  ] });
+};
+const oe = /* @__PURE__ */ o("div")({
+  name: "r",
+  class: "ruyb9yw",
+  propsAsIs: !1
+}), re = /* @__PURE__ */ o("img")({
+  name: "i",
+  class: "imbcgl0",
+  propsAsIs: !1
+}), ie = ({
+  sponsorLogo: e
+}) => e && /* @__PURE__ */ t(oe, {
+  children: /* @__PURE__ */ t(re, {
+    alt: "sponsor-logo",
+    src: e
+  })
+});
+const le = /* @__PURE__ */ o("div")({
+  name: "x",
+  class: "xk8r1eq",
+  propsAsIs: !1
+}), ce = ({
+  openedQuestion: e,
+  closeQuestion: s,
+  vote: n
+}) => {
+  var r;
+  return /* @__PURE__ */ c(le, {
+    children: [/* @__PURE__ */ t(ae, {
+      close: s,
+      type: (e == null ? void 0 : e.type) || T.UNSET
+    }), e && /* @__PURE__ */ t(w, {
+      vote: n,
+      openedQuestion: e
+    }), /* @__PURE__ */ t(ie, {
+      sponsorLogo: (r = e == null ? void 0 : e.sponsorship) == null ? void 0 : r.logo
+    })]
+  });
+}, de = ({ leaderboardList: e }) => {
+  const { data: s } = d(e.$store), [n, r] = h(void 0), a = (l) => {
+    const i = s.find((p) => p.userId === l);
+    r(i);
+  };
+  return /* @__PURE__ */ c(g, { children: [
+    n && /* @__PURE__ */ t(C, { comeBack: () => a(null), ...n }),
+    !n && /* @__PURE__ */ t(Q, { fetchMore: e.fetchMore, items: s, openItemDetail: a })
+  ] });
+}, pe = ({ store: e, openQuestion: s }) => {
+  const n = d(e);
+  return n != null && n.data ? /* @__PURE__ */ t(F, { openQuestion: s, questions: n.data }) : /* @__PURE__ */ t("div", { children: "wait questions..." });
+}, ue = ({ store: e }) => {
+  const { data: s } = d(e);
+  return s != null && s.summary ? /* @__PURE__ */ t(O, { ...s.summary, ...s.percentage }) : /* @__PURE__ */ t("div", { children: "wait user..." });
+}, me = ({ gamification: e }) => {
+  const [s, n] = h(b.HOME);
+  return /* @__PURE__ */ c(g, { children: [
+    /* @__PURE__ */ c(U, { children: [
+      /* @__PURE__ */ t(R, { activePage: s, toggleActivePage: n }),
+      s === b.HOME && /* @__PURE__ */ t(ue, { store: e.userSummary.getStore() })
+    ] }),
+    s === b.HOME && /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(pe, { openQuestion: e.openQuestion, store: e.questions.getStore() }) }),
+    s === b.LEADERBOARD && /* @__PURE__ */ t(x, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ t(de, { leaderboardList: e.leaderboardList }) })
+  ] });
+};
+const ve = () => K, he = /* @__PURE__ */ o(ve())({
+  name: "u",
+  class: "u1ph66cs",
+  propsAsIs: !0
+}), fe = ({
+  gamification: e
+}) => {
+  const {
+    loading: s,
+    data: n
+  } = d(e.openedQuestion);
+  return /* @__PURE__ */ c(g, {
+    children: [(s || n) && /* @__PURE__ */ t(he, {
+      children: /* @__PURE__ */ t(ce, {
+        closeQuestion: e.closeQuestion,
+        vote: e.submitAnswer,
+        openedQuestion: n
+      })
+    }), /* @__PURE__ */ t($, {
+      "data-nav": "true",
+      style: {
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: /* @__PURE__ */ t(me, {
+        gamification: e
+      })
+    })]
+  });
+}, ge = ({ highlights: e }) => {
+  const s = d(e.openedInsight);
+  return /* @__PURE__ */ c(g, { children: [
+    !s && e.insights && /* @__PURE__ */ t(M, { highlights: e, store: e.insights.getStore() }),
+    s && /* @__PURE__ */ t(
+      q,
+      {
+        openedInsight: s,
+        closeHighlights: e.closeFeature,
+        closeInsight: e.closeHighlight
+      }
+    )
+  ] });
+}, ye = ({ sdk: e, feature: s }) => B(() => s ? s.featureConfig.get().type === A.GAMES ? /* @__PURE__ */ t(_, { sdk: e, feature: s, children: /* @__PURE__ */ t(fe, { gamification: s, sdk: e }) }) : s.featureConfig.get().type === A.HIGHLIGHTS ? /* @__PURE__ */ t(_, { sdk: e, feature: s, children: /* @__PURE__ */ t(ge, { highlights: s, sdk: e }) }) : null : null, [e, s]);
+const be = /* @__PURE__ */ o("button")({
+  name: "e",
+  class: "enu64b2",
+  propsAsIs: !1
+}), ke = /* @__PURE__ */ o("span")({
+  name: "t",
+  class: "tw2meku",
+  propsAsIs: !1
+}), Se = /* @__PURE__ */ o("span")({
+  name: "a",
+  class: "aka8vam",
+  propsAsIs: !1
+}), I = ({ disabled: e, active: s, onClick: n, label: r, icon: a }) => /* @__PURE__ */ t(be, { onClick: n, disabled: e, "data-selected": s, children: /* @__PURE__ */ c(g, { children: [
+  a && /* @__PURE__ */ t(ke, { children: a }),
+  /* @__PURE__ */ t(Se, { children: r })
+] }) });
+const Ae = () => y, $e = /* @__PURE__ */ o(Ae())({
+  name: "a",
+  class: "a10lggiw",
+  propsAsIs: !0
+}), f = "channels", xe = (e) => {
+  var s;
+  return /* @__PURE__ */ t(I, {
+    ...e,
+    id: "channels",
+    label: "Channels",
+    icon: /* @__PURE__ */ t($e, {
+      name: "icon-btn-channels",
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
+    })
+  });
+};
+const Ie = () => y, _e = /* @__PURE__ */ o(Ie())({
+  name: "d",
+  class: "d1x5s8ie",
+  propsAsIs: !0
+}), u = "featuredGroups", Le = (e) => {
+  var s;
+  return /* @__PURE__ */ t(I, {
+    ...e,
+    label: "FG+",
+    id: "featuredGroups",
+    icon: /* @__PURE__ */ t(_e, {
+      name: "icon-btn-feature-groups",
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
+    })
+  });
+};
+const Ee = () => y, we = /* @__PURE__ */ o(Ee())({
+  name: "n",
+  class: "ntav86o",
+  propsAsIs: !0
+}), k = "leaderboard", Ce = (e) => {
+  var s;
+  return /* @__PURE__ */ t(I, {
+    ...e,
+    label: "Leader Board",
+    id: "leaderboard",
+    icon: /* @__PURE__ */ t(we, {
+      name: "icon-btn-leaderboard",
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
+    })
+  });
+};
+const Qe = /* @__PURE__ */ o("div")({
+  name: "n",
+  class: "n1rlvhvz",
+  propsAsIs: !1
+}), Fe = ({
+  children: e,
+  className: s
+}) => /* @__PURE__ */ t(Qe, {
+  className: s,
+  children: e
+});
+const Oe = () => Fe, Re = /* @__PURE__ */ o(Oe())({
+  name: "n",
+  class: "n9bnom",
+  propsAsIs: !0
+}), Me = ({ activeOverlay: e, setActiveOverlay: s, sdkReady: n }) => /* @__PURE__ */ c(Re, { children: [
+  /* @__PURE__ */ t(xe, { active: e === f, onClick: () => s(f) }),
+  /* @__PURE__ */ t(
+    Le,
+    {
+      active: e === u,
+      disabled: !n,
+      onClick: () => {
+        s(u);
+      }
+    }
+  ),
+  /* @__PURE__ */ t(
+    Ce,
+    {
+      active: e === k,
+      onClick: () => s(k)
+    }
+  )
+] }), qe = (e, s) => {
+  const [n, r] = h(!1), a = d(e.status) === "ready", [l, i] = h(u), p = D(
+    (m) => {
+      i(m), m === u ? (e.createEventSession(s), e.openFeature(A.GAMES)) : e.closeFeature();
+    },
+    [s, e]
+  );
+  return L(() => {
+    !a && l === u && (i(f), e.closeFeature());
+  }, [a, l, e]), {
+    sdkEnabled: n,
+    sdkReady: a,
+    activeOverlay: l,
+    activateAndLoadOverlay: p,
+    enableSdk: () => {
+      e.initializeApp().then(({ enabled: m, err: S }) => {
+        if (r(!0), S) {
+          p(f);
+          return;
+        }
+        if (m) {
+          p(u);
+          return;
+        }
+      });
+    },
+    disableSdk: () => {
+      r(!1), e.disableApp();
+    }
+  };
+}, Ge = (e) => {
+  const s = d(e.getActiveFeature()), [n, r] = h(null);
+  return L(() => {
+    const a = e.getFeatures();
+    if (s)
+      for (const [l, i] of a)
+        l === s ? i.status.get() === v.Suspended && (i.enable(), r(i)) : i.status.get() === v.Ready && i.disable();
+    else {
+      for (const [, l] of a)
+        l.status.get() === v.Ready && l.disable();
+      r(null);
+    }
+    return () => {
+      for (const [, l] of a)
+        l.status.get() === v.Ready && l.disable();
+    };
+  }, [s, e]), [s, n];
+}, He = ({ sdk: e }) => {
+  const [, s] = Ge(e);
+  return /* @__PURE__ */ t(ye, { feature: s, sdk: e });
+}, Ne = ({ sdk: e, overlays: s, children: n, event: r }) => {
+  const { sdkEnabled: a, sdkReady: l, activeOverlay: i, activateAndLoadOverlay: p, enableSdk: m, disableSdk: S } = qe(
+    e,
+    r
+  );
+  return /* @__PURE__ */ t(G, { style: { height: "100%" }, children: /* @__PURE__ */ c(Y, { children: [
+    a && /* @__PURE__ */ t(
+      Me,
+      {
+        sdkReady: l,
+        activeOverlay: i,
+        setActiveOverlay: p
+      }
+    ),
+    /* @__PURE__ */ t(
+      $,
+      {
+        "data-nav": a.toString(),
+        style: { display: !a || i === f ? "block" : "none" },
+        children: n && n({ enableSdk: m, disableSdk: S })
+      }
+    ),
+    /* @__PURE__ */ t(
+      $,
+      {
+        "data-nav": a.toString(),
+        style: { display: i === k ? "block" : "none" },
+        children: s && i === k && s[i]
+      }
+    ),
+    a && i === u && /* @__PURE__ */ t(He, { sdk: e })
+  ] }) });
+}, cs = ({
+  sdkKey: e,
+  plugins: s,
+  children: n,
+  production: r = !0
+}) => /* @__PURE__ */ t(H, { sdkKey: e, plugins: s, production: r, autoEnable: !1, children: n }), ds = ({ children: e, event: s, overlays: n }) => {
+  const { sdk: r, status: a } = P(N);
+  if (a === j.UNSET)
+    throw new Error("Wrap app in `StreamLayerProvider`");
+  return r ? /* @__PURE__ */ t(Ne, { sdk: r, event: s, overlays: n, children: e }) : e({});
+};
+export {
+  cs as MastersStreamLayerProvider,
+  ds as MastersStreamLayerSDKReact
+};

package/lib/es/points.js

@@ -0,0 +1,68 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { FeatureType as n } from "@streamlayer/sdk-web-types";
+import { useMemo as p } from "react";
+import { s, Y as l, c } from "../provider-a6b36c89.js";
+import "react-auth-code-input";
+import "react-phone-number-input";
+import "@connectrpc/connect";
+import "@connectrpc/connect-web";
+import "@streamlayer/sl-eslib/users/users_connect";
+import "react-countdown-circle-timer";
+import "@streamlayer/sdk-web-interfaces";
+import "@streamlayer/sdk-web-features";
+import "@streamlayer/sdk-web-api";
+import "@streamlayer/sdk-web-storage";
+import { useStore as a } from "@nanostores/react";
+import "@streamlayer/sdk-web-notifications";
+import { u } from "../app-43e52907.js";
+import "@streamlayer/sl-eslib/interactive/interactive.common_pb";
+import "@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb";
+import "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
+import "@streamlayer/sl-eslib/sports/events/events_connect";
+import "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
+import "./useStreamLayerApp.js";
+import "@streamlayer/sdk-web";
+const d = () => l, f = /* @__PURE__ */ s("div")({
+  name: "l",
+  class: "l4qld3l",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ s("div")({
+  name: "a",
+  class: "ainhtok",
+  propsAsIs: !1
+}), y = /* @__PURE__ */ s(d())({
+  name: "x",
+  class: "xk8yd5t",
+  propsAsIs: !0
+}), h = /* @__PURE__ */ s("div")({
+  name: "h",
+  class: "h6rf9gb",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ s("div")({
+  name: "c",
+  class: "c18f5pxx",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
+  name: "m",
+  class: "m1jwsyj1",
+  propsAsIs: !1
+}), g = ({ points: r }) => /* @__PURE__ */ m(f, { children: [
+  /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(y, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ m(h, { children: [
+    /* @__PURE__ */ t(x, { children: "Total points" }),
+    /* @__PURE__ */ t(v, { children: c(r) })
+  ] })
+] }), A = ({ userSummary: r }) => {
+  var e, o;
+  const i = a(r.getStore());
+  return ((o = (e = i.data) == null ? void 0 : e.summary) == null ? void 0 : o.points) === void 0 ? null : /* @__PURE__ */ t(g, { points: i.data.summary.points });
+}, I = ({ sdk: r }) => {
+  const { organizationSettings: i, streamSettings: e } = a(r.sdkStore), o = p(() => r.getFeature(n.GAMES), [r, i, e]);
+  return o ? /* @__PURE__ */ t(A, { userSummary: o.userSummary }) : null;
+}, Q = () => {
+  const r = u();
+  return r ? /* @__PURE__ */ t(I, { sdk: r }) : null;
+};
+export {
+  Q as StreamLayerSDKPoints
+};

package/lib/es/useStreamLayerApp.js

@@ -0,0 +1,27 @@
+import { StreamLayer as a } from "@streamlayer/sdk-web";
+import { useState as i, useEffect as c } from "react";
+const m = (t, n, s, f) => {
+  const [u, l] = i(null);
+  return c(() => {
+    let r = !1;
+    if (!t)
+      return console.error("streamlayer sdk key should be provided"), l((e) => (e !== null && typeof e.disableApp == "function" && e.disableApp(), null)), () => {
+        r = !0;
+      };
+    const o = a(t, s, f);
+    if (n)
+      for (const e of n)
+        o.use(e);
+    return o.ready().then((e) => {
+      r || l(e.sdk);
+    }).catch((e) => console.log(e)), () => {
+      r = !0, o.close(function(e) {
+        if (e)
+          throw e;
+      });
+    };
+  }, [t, s]), u;
+};
+export {
+  m as useStreamLayerApp
+};

package/lib/index.d.ts

@@ -9,6 +9,3 @@ import '@streamlayer/sdk-web-notifications';
 import '@streamlayer/feature-gamification';
 export { StreamLayerProvider } from './app/provider';
 export { StreamLayerSDKReact, useStreamLayer } from './app/app';
-export { useStreamLayerApp } from './app/useStreamLayerApp';
-export { StreamLayerSDKPoints } from './app/points';
-export { MastersStreamLayerSDKReact } from './app/masters';