@streamlayer/react-ui 0.92.0 → 0.94.0

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

@@ -1,40 +1,51 @@
-import { jsx as e, jsxs as N, Fragment as b } from "react/jsx-runtime";
-import { useStore as y } from "@nanostores/react";
-import { useState as S, useMemo as O, useEffect as I, useRef as v, useCallback as R } from "react";
-import { r as C } from "../../../useClipboardCopy-E5rEe6It.js";
-import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
-import { QuestionTypeData as D } from "../../gamification/constants.js";
+import { jsx as e, jsxs as k, Fragment as b } from "react/jsx-runtime";
+import { useStore as a } from "@nanostores/react";
+import { useState as w, useMemo as O, useEffect as I, useRef as x, useCallback as R } from "react";
+import { r as P } from "../../../index-jRXrW6ie.js";
+import { NotificationType as d } from "@streamlayer/sdk-web-notifications";
+import { scrollIntoAppView as q } from "../useSdkScroll.js";
+import { QuestionTypeData as A } from "../../gamification/constants.js";
 import { Notification as T } from "../../gamification/question/notification/index.js";
-import { PredictionResult as E } from "../../gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { Pill as B, HiddenContainer as H, Container as P, InnerContainer as q, NotificationRefreshing as Q } from "./styles.js";
+import { PredictionResult as B } from "../../gamification/question/notification/prediction-result/index.js";
+import { Onboarding as H } from "./Onboarding/index.js";
+import { Pill as Q, HiddenContainer as j, Container as z, InnerContainer as F, NotificationRefreshing as G } from "./styles.js";
 import "../../../index-uEuzH3jr.js";
-import "../../gamification/copyNotification/index.js";
-import "../../icons/index.js";
-import "@linaria/react";
-import "../../gamification/copyNotification/styles.js";
+import "lodash.throttle";
+import "../../theme/constants.js";
+import "../../../index-keh7OLCY.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/question/notification/insight/index.js";
 import "../../video-player/index.js";
+import "../../icons/index.js";
+import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../gamification/question/notification/insight/styles.js";
 import "../../gamification/question/notification/styles.js";
 import "../../gamification/question/notification/tweet/index.js";
 import "../../questions/twitter/index.js";
 import "../../questions/twitter/account/index.js";
+import "../../../utils/common.js";
 import "../../questions/twitter/account/styles.js";
 import "../../questions/twitter/styles.js";
 import "../../gamification/question/notification/tweet/styles.js";
+import "../../animated-counter/index.js";
+import "react-countup";
 import "../../gamification/question/notification/prediction-result/animation-lines/index.js";
 import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../../gamification/question/notification/prediction-result/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
+import "../useImagesPreload.js";
 import "../../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
+import "../../skeleton/index.js";
+import "../../skeleton/styles.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../useClipboardCopy.js";
+import "../../gamification/copyNotification/index.js";
+import "../../gamification/copyNotification/styles.js";
 import "../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../../gamification/onboarding/slides/onboarding-rules/index.js";
 import "../../gamification/onboarding/slides/onboarding-rules/styles.js";
@@ -43,133 +54,129 @@ import "../../gamification/onboarding/slides/onboarding-terms/styles.js";
 import "../../gamification/onboarding/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
+import "../../modal/index.js";
 import "./Onboarding/Notification/index.js";
 import "./Onboarding/Notification/styles.js";
 import "../../gamification/question/notification/pill/index.js";
 import "../../gamification/question/notification/pill/styles.js";
-const j = (s) => {
-  const [t, n] = S(0), i = v(null), l = R((r) => {
-    i.current = r;
+const S = (s) => {
+  const [t, p] = w(0), i = x(null), m = R((o) => {
+    i.current = o;
   }, []);
   I(() => {
-    var o;
-    const r = (o = i.current) == null ? void 0 : o.getBoundingClientRect();
-    r && n(r.height);
+    var r;
+    const o = (r = i.current) == null ? void 0 : r.getBoundingClientRect();
+    o && p(o.height);
   }, [s]);
-  const c = R((r) => {
-    n(r);
+  const n = R((o) => {
+    p(o);
   }, []);
-  return [l, t, c];
-}, z = ({
+  return [m, t, n];
+}, U = ({
   sdk: s,
   notification: t,
-  appNode: n,
-  headerNode: i,
-  sdkInScrollView: l
+  appNode: p,
+  sdkInDesktopView: i
 }) => {
-  var u, m;
-  const [c, r, o] = j(t.id);
-  if (t.type === g.QUESTION)
-    return /* @__PURE__ */ N(b, {
-      children: [/* @__PURE__ */ e(H, {
-        ref: c,
+  var r, c;
+  const [m, n, o] = S(t.id);
+  return t.type === d.QUESTION ? /* @__PURE__ */ k(b, {
+    children: [/* @__PURE__ */ e(j, {
+      ref: m,
+      children: /* @__PURE__ */ e(T, {
+        ...t
+      })
+    }), /* @__PURE__ */ k(z, {
+      style: {
+        height: t.hiding ? 0 : n
+      },
+      hiding: t.hiding,
+      children: [/* @__PURE__ */ e(F, {
         style: {
-          position: "absolute"
+          height: "100%"
         },
         children: /* @__PURE__ */ e(T, {
           ...t
         })
-      }), /* @__PURE__ */ N(P, {
-        style: {
-          height: t.hiding ? 0 : r
-        },
-        hiding: t.hiding,
-        children: [/* @__PURE__ */ e(q, {
-          style: {
-            height: "100%"
-          },
-          children: /* @__PURE__ */ e(T, {
-            ...t
-          })
-        }), /* @__PURE__ */ e(Q, {}, t.id)]
-      })]
-    });
-  if (t.type === g.QUESTION_RESOLVED && ((m = (u = t.data) == null ? void 0 : u.question) != null && m.predictionResult))
-    return /* @__PURE__ */ e(E, {
-      style: {
-        height: t.hiding ? 0 : r
-      },
-      saveHeight: o,
-      close: t.close,
-      hiding: t.hiding,
-      ...t.data.question
-    });
-  if (t.type === g.ONBOARDING) {
-    const p = l ? n : i;
-    return /* @__PURE__ */ e(x, {
-      style: {
-        height: t.hiding ? 0 : r
-      },
-      saveHeight: o,
-      sdk: s,
-      notification: t,
-      renderToNode: p
-    });
-  }
-  return null;
-}, Pt = ({
+      }), /* @__PURE__ */ e(G, {}, t.id)]
+    })]
+  }) : t.type === d.QUESTION_RESOLVED && ((c = (r = t.data) == null ? void 0 : r.question) != null && c.predictionResult) ? /* @__PURE__ */ e(B, {
+    style: {
+      height: t.hiding ? 0 : n
+    },
+    saveHeight: o,
+    close: t.close,
+    hiding: t.hiding,
+    ...t.data.question
+  }) : t.type === d.ONBOARDING ? /* @__PURE__ */ e(H, {
+    style: {
+      height: t.hiding ? 0 : n
+    },
+    saveHeight: o,
+    sdk: s,
+    notification: t,
+    sdkInDesktopView: i,
+    appNode: p
+  }) : null;
+}, Wt = ({
   sdk: s,
   headerNode: t,
-  responsiveStore: n,
-  appNode: i,
-  scrollStore: l
+  scrollNode: p,
+  responsiveStore: i,
+  appNode: m,
+  scrollStore: n
 }) => {
-  const [c] = S(s.getNotificationsStore()), r = y(c), {
-    tabsShown: o
-  } = y(l, {
+  const [o] = w(s.getNotificationsStore()), r = a(o), {
+    tabsShown: c
+  } = a(n, {
     keys: ["tabsShown"]
   }), {
-    sdkInView: u,
-    sdkInScrollView: m
-  } = y(n, {
-    keys: ["sdkInView", "sdkInScrollView"]
-  }), [p, a] = S(null), h = O(() => {
+    sdkInView: y,
+    sdkInDesktopView: C
+  } = a(i, {
+    keys: ["sdkInView", "sdkInDesktopView"]
+  }), [u, h] = w(null), l = O(() => {
     if (!(r != null && r.size))
       return null;
-    for (const d of r.values())
-      if (d.type === g.ONBOARDING)
-        return d;
+    for (const f of r.values())
+      if (f.type === d.ONBOARDING)
+        return f;
     return r.values().next().value;
   }, [r]);
   I(() => {
-    h && n.get().sdkInView && a(h);
-  }, [h]), I(() => {
-    u || a(null);
-  }, [u]);
-  const V = O(() => {
-    var d, w;
-    const f = m ? i : t;
-    return p && f.current && C.createPortal(/* @__PURE__ */ e(B, {
-      title: `New ${((w = D[(d = p.data) == null ? void 0 : d.questionType]) == null ? void 0 : w.label) || "notification"}`,
+    l && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && h(l), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
+      n.get().scrollPosition !== 0 && h(l);
+    }));
+  }, [l]), I(() => {
+    y || h(null);
+  }, [y]);
+  const E = O(() => {
+    var D, V;
+    const g = i.get().sdkInDesktopView ? m : t;
+    return u && g.current && P.createPortal(/* @__PURE__ */ e(Q, {
+      title: `New ${((V = A[(D = u.data) == null ? void 0 : D.questionType]) == null ? void 0 : V.label) || "notification"}`,
       onClick: () => {
-        var k;
-        (k = i.current) == null || k.scrollIntoView({
+        var N;
+        i.get().sdkInDesktopView ? (N = p.current) == null || N.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        }) : q(m, {
           behavior: "smooth"
-        }), a(null);
+        }), h(null);
       },
-      className: o ? "c1d7yse1" : void 0
-    }), f.current) || null;
-  }, [p, m, i, t, o]);
-  return /* @__PURE__ */ N(b, {
-    children: [!p && h && /* @__PURE__ */ e(z, {
-      sdkInScrollView: m,
+      className: c ? "c1d7yse1" : void 0
+    }), g.current) || null;
+  }, [u, m, t, p, c, i]);
+  return /* @__PURE__ */ k(b, {
+    children: [!u && l && /* @__PURE__ */ e(U, {
+      sdkInDesktopView: C,
       headerNode: t,
-      appNode: i,
+      appNode: m,
       sdk: s,
-      notification: h
-    }), V]
+      notification: l
+    }), E]
   });
 };
 export {
-  Pt as SDKNotifications
+  Wt as SDKNotifications
 };

package/lib/ui/app/Points/index.js

@@ -8,6 +8,7 @@ import "@streamlayer/sdk-web-interfaces";
 import "../../animated-counter/index.js";
 import "react-countup";
 import "../../theme/theme.js";
+import "../../theme/breakpoints.js";
 import "../../theme/constants.js";
 import "../../gamification/points/styles.js";
 import "@linaria/react";
@@ -15,18 +16,18 @@ import "../../icons/index.js";
 const S = ({ userSummary: t }) => {
   const [o, r] = p(0);
   return u(() => {
-    const n = t.subscribe((e) => {
-      var i, m;
-      (m = (i = e.data) == null ? void 0 : i.summary) != null && m.points && r(e.data.summary.points);
+    const n = t.subscribe((i) => {
+      var e, m;
+      (m = (e = i.data) == null ? void 0 : e.summary) != null && m.points && r(i.data.summary.points);
     });
     return () => {
       n();
     };
   }, [t]), /* @__PURE__ */ s(f, { points: o });
-}, k = ({ sdk: t }) => {
+}, A = ({ sdk: t }) => {
   const [o, r] = c(t);
   return o !== a.GAMES || !r ? null : /* @__PURE__ */ s(S, { userSummary: r.userSummary.getStore() });
 };
 export {
-  k as StreamLayerSDKPoints
+  A as StreamLayerSDKPoints
 };

package/lib/ui/app/masters.js

@@ -1,4 +1,4 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import { useRef as f, useEffect as N } from "react";
 import { resetCss as u } from "../theme/theme.js";
 import { ActiveFeature as A } from "./Features/index.js";
@@ -12,6 +12,7 @@ import { useSdkScroll as D } from "./useSdkScroll.js";
 import { ChannelsButtonId as E } from "../navigation/button/Channels.js";
 import { LeaderBoardButtonId as K } from "../navigation/button/LeaderBoard.js";
 import { FeaturedGroupsButtonId as L } from "../navigation/button/FeaturedGroups.js";
+import "../theme/breakpoints.js";
 import "../theme/constants.js";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
@@ -23,10 +24,8 @@ import "../navigation/index.js";
 import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-import "../../useClipboardCopy-E5rEe6It.js";
+import "../../index-jRXrW6ie.js";
 import "../../index-uEuzH3jr.js";
-import "../gamification/copyNotification/index.js";
-import "../gamification/copyNotification/styles.js";
 import "@streamlayer/sdk-web-notifications";
 import "../gamification/constants.js";
 import "../gamification/question/notification/index.js";
@@ -38,21 +37,30 @@ import "../gamification/question/notification/styles.js";
 import "../gamification/question/notification/tweet/index.js";
 import "../questions/twitter/index.js";
 import "../questions/twitter/account/index.js";
+import "../../utils/common.js";
 import "../questions/twitter/account/styles.js";
 import "../questions/twitter/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
 import "../gamification/question/notification/prediction-result/index.js";
+import "../animated-counter/index.js";
+import "react-countup";
 import "../gamification/question/notification/prediction-result/animation-lines/index.js";
 import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../gamification/question/notification/prediction-result/styles.js";
 import "../show-in/index.js";
 import "@linaria/core";
 import "./Notifications/Onboarding/index.js";
+import "./useImagesPreload.js";
 import "../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
+import "../skeleton/index.js";
+import "../skeleton/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "./useClipboardCopy.js";
+import "../gamification/copyNotification/index.js";
+import "../gamification/copyNotification/styles.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../gamification/onboarding/slides/onboarding-rules/index.js";
 import "../gamification/onboarding/slides/onboarding-rules/styles.js";
@@ -61,6 +69,7 @@ import "../gamification/onboarding/slides/onboarding-terms/styles.js";
 import "../gamification/onboarding/styles.js";
 import "../button/index.js";
 import "../button/styles.js";
+import "../modal/index.js";
 import "./Notifications/Onboarding/Notification/index.js";
 import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";
@@ -68,66 +77,67 @@ import "../gamification/question/notification/pill/index.js";
 import "../gamification/question/notification/pill/styles.js";
 import "lodash.throttle";
 import "../../index-keh7OLCY.js";
-const M = ({ sdk: r, className: s, scrollStore: n, appNode: t, scrollNode: i, headerNode: m, responsiveStore: p }) => {
-  const [, a] = j(r);
-  return /* @__PURE__ */ o(
+const M = ({ sdk: o, className: s, scrollStore: a, appNode: t, scrollNode: m, headerNode: r, responsiveStore: p }) => {
+  const [, n] = j(o);
+  return /* @__PURE__ */ i(
     A,
     {
       className: s,
-      scrollNode: i,
+      scrollNode: m,
       appNode: t,
-      scrollStore: n,
-      feature: a,
-      headerNode: m,
+      scrollStore: a,
+      feature: n,
+      headerNode: r,
       responsiveStore: p,
-      sdk: r
+      sdk: o
     }
   );
-}, Xt = ({ sdk: r, overlays: s, children: n }) => {
-  const t = f(null), i = f(null), [m] = k(t), [p, a] = D(t, m), { sdkEnabled: d, sdkReady: l, activeOverlay: e, activateAndLoadOverlay: v, activateEventWithId: S, deactivate: h, isLogged: g } = F(r);
+}, po = ({ sdk: o, overlays: s, children: a }) => {
+  const t = f(null), m = f(null), [r] = k(t), [p, n] = D(t, r), { sdkEnabled: d, sdkReady: l, activeOverlay: e, activateAndLoadOverlay: v, activateEventWithId: S, deactivate: h, isLogged: g } = F(o);
   return N(() => {
     import("./Features/Gamification/gamification-feature.js");
   }, []), /* @__PURE__ */ c(x, { ref: t, children: [
-    d && /* @__PURE__ */ o(
+    d && /* @__PURE__ */ i(
       C,
       {
-        ref: i,
+        ref: m,
         sdkReady: l,
         activeOverlay: e,
         className: u,
-        setActiveOverlay: (y) => v("", y)
+        setActiveOverlay: (y) => v("", y),
+        responsiveStore: r
       }
     ),
-    /* @__PURE__ */ c(B, { ref: p, "data-nav": d.toString(), children: [
-      l && /* @__PURE__ */ o(
+    /* @__PURE__ */ c(B, { className: "sl-hide-on-modal", ref: p, "data-nav": d.toString(), children: [
+      l && /* @__PURE__ */ i(
         I,
         {
-          sdk: r,
+          sdk: o,
           scrollNode: p,
-          headerNode: i,
+          headerNode: m,
           appNode: t,
-          scrollStore: a,
-          responsiveStore: m
+          scrollStore: n,
+          responsiveStore: r
         }
       ),
-      /* @__PURE__ */ o("div", { style: !d || e === E ? {} : { display: "none" }, children: n && n({ activateEventWithId: S, deactivate: h }) }),
+      /* @__PURE__ */ i("div", { style: !d || e === E ? {} : { display: "none" }, children: a && a({ activateEventWithId: S, deactivate: h }) }),
       s && e === K && s[e],
-      l && e === L && /* @__PURE__ */ o(
+      l && e === L && /* @__PURE__ */ i(
         M,
         {
-          scrollStore: a,
-          responsiveStore: m,
+          scrollStore: n,
+          responsiveStore: r,
           scrollNode: p,
           appNode: t,
-          headerNode: i,
+          headerNode: m,
           className: u,
-          sdk: r
+          sdk: o
         }
       )
     ] }),
-    d && !g && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    d && !g && /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  Xt as MastersApp
+  po as MastersApp
 };

package/lib/ui/app/styles.d.ts

@@ -12,3 +12,4 @@ export declare const LeaderboardContainer: import("@linaria/react").WYWEvalMeta
 export declare const TabsNavContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }>;
+export declare const UserSummaryContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/styles.js

@@ -27,6 +27,10 @@ const i = /* @__PURE__ */ s("div")({
   name: "TabsNavContainer",
   class: "tvdam54",
   propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "UserSummaryContainer",
+  class: "u14fk93k",
+  propsAsIs: !1
 });
 export {
   l as LeaderboardContainer,
@@ -35,5 +39,6 @@ export {
   c as SDKScrollContainer,
   n as SDKWhiteContainer,
   p as TabsContainer,
-  C as TabsNavContainer
+  C as TabsNavContainer,
+  m as UserSummaryContainer
 };

package/lib/ui/app/useClipboardCopy.js

@@ -1,11 +1,32 @@
-import "react/jsx-runtime";
-import "react";
-import { u } from "../../useClipboardCopy-E5rEe6It.js";
-import "../gamification/copyNotification/index.js";
+import { jsx as u } from "react/jsx-runtime";
+import { useRef as p, useState as m, useCallback as l, useEffect as s } from "react";
+import { r as f } from "../../index-jRXrW6ie.js";
+import { CopyNotification as b } from "../gamification/copyNotification/index.js";
 import "../../index-uEuzH3jr.js";
 import "../icons/index.js";
 import "@linaria/react";
 import "../gamification/copyNotification/styles.js";
+const h = (r) => {
+  const t = p(), [c, o] = m(null), a = l(
+    async (i) => {
+      var e;
+      if (i && ((e = navigator == null ? void 0 : navigator.clipboard) != null && e.writeText)) {
+        t.current && (clearTimeout(t.current), o(null));
+        try {
+          await navigator.clipboard.writeText(i), r.current && (o(f.createPortal(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
+            o(null);
+          }, 1e3));
+        } catch (n) {
+          console.error("Unable to copy to clipboard", n);
+        }
+      }
+    },
+    [r]
+  );
+  return s(() => () => {
+    clearTimeout(t.current);
+  }, []), [a, c];
+};
 export {
-  u as useClipboardCopy
+  h as useClipboardCopy
 };

package/lib/ui/app/useImagesPreload.d.ts

@@ -0,0 +1,4 @@
+export declare const useImagesPreload: (images?: string[]) => {
+    loading: boolean;
+    throttled: boolean;
+};

package/lib/ui/app/useImagesPreload.js

@@ -0,0 +1,23 @@
+import { useState as u, useRef as T, useCallback as c, useEffect as p } from "react";
+const I = (e) => {
+  const [i, r] = u(!1), [f, s] = u(!1), t = T(null), a = c(() => {
+    s(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+      s(!1);
+    }, 1e3);
+  }, []), l = c(async (m) => {
+    r(!0);
+    const d = m.map(
+      (n) => new Promise((g, h) => {
+        const o = new Image();
+        o.onload = () => g(n), o.onerror = () => h(), o.src = n;
+      })
+    );
+    await Promise.allSettled(d), r(!1);
+  }, []);
+  return p(() => {
+    e && (a(), l(e));
+  }, [e, a, l]), { loading: i, throttled: f };
+};
+export {
+  I as useImagesPreload
+};