@streamlayer/react 0.27.0 → 0.27.2

package/lib/index-b7b4d84f.js

@@ -0,0 +1,228 @@
+import { jsxs as r, jsx as t, Fragment as g } from "react/jsx-runtime";
+import { s as o, q as d, o as b, w as y, Y as x, j as A, C as $, v as u, h as c, e as h, d as I, g as p, r as Q } from "./index-ed4f12f6.js";
+import { useStore as a } from "@nanostores/react";
+import { useState as w } from "react";
+import { QuestionType as S } from "@streamlayer/sdk-web-types";
+import "react-countdown-circle-timer";
+import "./es/useStreamLayerApp.js";
+import "@streamlayer/sdk-web";
+import "@streamlayer/sdk-web-interfaces";
+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 "@streamlayer/sl-eslib/users/users_connect";
+import "react-auth-code-input";
+import "react-phone-number-input";
+import "@connectrpc/connect";
+import "@connectrpc/connect-web";
+const k = () => d, q = () => d, N = /* @__PURE__ */ o("div")({
+  name: "a",
+  class: "acysrl1",
+  propsAsIs: !1
+}), _ = /* @__PURE__ */ o("div")({
+  name: "l",
+  class: "lo57cjm",
+  propsAsIs: !1
+}), L = /* @__PURE__ */ o(k())({
+  name: "p",
+  class: "p14kwh4y",
+  propsAsIs: !0
+}), U = /* @__PURE__ */ o("span")({
+  name: "s",
+  class: "sxun7sq",
+  propsAsIs: !1
+}), E = /* @__PURE__ */ o("button")({
+  name: "c",
+  class: "c1i8ida8",
+  propsAsIs: !1
+}), D = /* @__PURE__ */ o(q())({
+  name: "g",
+  class: "g1m0xfmw",
+  propsAsIs: !0
+}), v = ({ type: e, close: n, label: s }) => {
+  const i = e ? b[e] : { label: s, iconName: void 0 };
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r(_, { children: [
+      (i == null ? void 0 : i.iconName) && /* @__PURE__ */ t(L, { name: i.iconName }),
+      (i == null ? void 0 : i.label) && /* @__PURE__ */ t(U, { children: i.label })
+    ] }),
+    /* @__PURE__ */ t(E, { onClick: n, children: /* @__PURE__ */ t(D, { name: "icon-cross" }) })
+  ] });
+};
+const M = /* @__PURE__ */ o("div")({
+  name: "n",
+  class: "n1aopxp8",
+  propsAsIs: !1
+}), j = ({
+  children: e,
+  style: n,
+  className: s
+}) => /* @__PURE__ */ t(M, {
+  style: n,
+  className: s,
+  children: e
+});
+const O = /* @__PURE__ */ o("div")({
+  name: "e",
+  class: "e18unvw4",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ o("div")({
+  name: "r",
+  class: "rs0uvk8",
+  propsAsIs: !1
+}), H = /* @__PURE__ */ o("h3")({
+  name: "n",
+  class: "n1hem4g7",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ o("div")({
+  name: "i",
+  class: "i193lbwv",
+  propsAsIs: !1
+}), F = /* @__PURE__ */ o("a")({
+  name: "a",
+  class: "a1dka9qs",
+  propsAsIs: !1
+}), R = /* @__PURE__ */ o("div")({
+  name: "l",
+  class: "l1un98tk",
+  propsAsIs: !1
+}), B = ({
+  created: e,
+  title: n,
+  instantView: s
+}) => {
+  const i = new Date(e), l = i.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }), f = i.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ r(O, { children: [
+    /* @__PURE__ */ r(R, { children: [
+      l,
+      "・",
+      f
+    ] }),
+    (s == null ? void 0 : s.video) && /* @__PURE__ */ t(y, { source: s.video.url, poster: s.video.thumbnailUrl }),
+    /* @__PURE__ */ r(C, { children: [
+      /* @__PURE__ */ t(H, { children: (s == null ? void 0 : s.heading) || n }),
+      /* @__PURE__ */ t(T, { children: s == null ? void 0 : s.body }),
+      (s == null ? void 0 : s.webLink) && /* @__PURE__ */ r(F, { href: s == null ? void 0 : s.webLink.url, target: "_blank", children: [
+        "Explore more of the Masters History",
+        /* @__PURE__ */ t(d, { name: "icon-external-link" })
+      ] })
+    ] })
+  ] });
+};
+const P = /* @__PURE__ */ o("div")({
+  name: "d",
+  class: "dk8r1eq",
+  propsAsIs: !1
+}), V = ({
+  openedQuestion: e
+}) => {
+  var n;
+  return ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "insight" ? /* @__PURE__ */ t(B, {
+    created: e.attributes.created,
+    ...e.attributes.attributes.value
+  }) : null;
+}, G = ({
+  extendedQuestion: e,
+  vote: n
+}) => {
+  const {
+    loading: s,
+    data: i
+  } = e;
+  return !s && i ? /* @__PURE__ */ t(x, {
+    vote: n,
+    openedQuestion: i
+  }) : null;
+}, Y = ({
+  gamification: e
+}) => {
+  var n;
+  const s = a(e.openedQuestion.$store), i = a(e.openedQuestion.$extendedStore);
+  if (!s)
+    return null;
+  const l = s.type;
+  return /* @__PURE__ */ r(P, {
+    children: [/* @__PURE__ */ t(v, {
+      close: e.closeQuestion,
+      type: ((n = s.attributes) == null ? void 0 : n.type) || S.UNSET
+    }), l === "question" && /* @__PURE__ */ t(G, {
+      vote: e.submitAnswer,
+      extendedQuestion: i
+    }), l !== "question" && /* @__PURE__ */ t(V, {
+      openedQuestion: s
+    })]
+  });
+}, z = ({ leaderboardList: e, openUser: n }) => {
+  const { data: s } = a(e.$store);
+  return /* @__PURE__ */ t(A, { fetchMore: e.fetchMore, items: s, openItemDetail: n });
+}, J = ({ store: e, openQuestion: n }) => {
+  const s = a(e);
+  return s != null && s.data ? /* @__PURE__ */ t($, { openQuestion: n, questions: s.data }) : /* @__PURE__ */ t("div", { children: "wait questions..." });
+}, K = ({ store: e }) => {
+  const { data: n } = a(e);
+  return n != null && n.summary ? /* @__PURE__ */ t(u, { ...n.summary, ...n.percentage }) : /* @__PURE__ */ t("div", { children: "wait user..." });
+}, W = ({ gamification: e }) => {
+  const [n, s] = w(c.HOME);
+  return /* @__PURE__ */ r("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ r(h, { children: [
+      /* @__PURE__ */ t(I, { activePage: n, toggleActivePage: s }),
+      n === c.HOME && /* @__PURE__ */ t(K, { store: e.userSummary.getStore() })
+    ] }),
+    n === c.HOME && /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(J, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) }),
+    n === c.LEADERBOARD && /* @__PURE__ */ t(p, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ t(z, { openUser: e.openUser, leaderboardList: e.leaderboardList }) })
+  ] });
+};
+const X = () => j, m = /* @__PURE__ */ o(X())({
+  name: "m",
+  class: "m1ph66cs",
+  propsAsIs: !0
+}), Z = /* @__PURE__ */ o("div")({
+  name: "x",
+  class: "xorme7i",
+  propsAsIs: !1
+}), Ie = ({
+  gamification: e,
+  className: n
+}) => {
+  const s = a(e.openedQuestion.$store), i = a(e.openedUser);
+  return /* @__PURE__ */ r(g, {
+    children: [s && /* @__PURE__ */ t(m, {
+      className: n,
+      children: /* @__PURE__ */ t(Y, {
+        gamification: e
+      })
+    }), i && /* @__PURE__ */ t(m, {
+      className: n,
+      children: /* @__PURE__ */ r(Z, {
+        children: [/* @__PURE__ */ t(v, {
+          label: "Friend's Rank",
+          close: e.closeUser
+        }), /* @__PURE__ */ t(h, {
+          children: /* @__PURE__ */ t(u, {
+            ...i
+          })
+        })]
+      })
+    }), /* @__PURE__ */ t(Q, {
+      className: n,
+      "data-nav": "true",
+      children: /* @__PURE__ */ t(W, {
+        gamification: e
+      })
+    })]
+  });
+};
+export {
+  Ie as GamificationOverlay,
+  Ie as default
+};