@streamlayer/react-ui 0.95.0 → 0.96.0

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

@@ -1,14 +1,15 @@
-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 { jsx as m, jsxs as w, Fragment as b } from "react/jsx-runtime";
+import { useStore as k } from "@nanostores/react";
+import { useState as y, useMemo as O, useEffect as I, useRef as E, 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 { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { useMastersContext as q } from "../useMastersContext.js";
+import { scrollIntoAppView as A } from "../useSdkScroll.js";
+import { QuestionTypeData as B } from "../../gamification/constants.js";
 import { Notification as T } from "../../gamification/question/notification/index.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 { PredictionResult as H } from "../../gamification/question/notification/prediction-result/index.js";
+import { Onboarding as Q } from "./Onboarding/index.js";
+import { Pill as j, HiddenContainer as z, Container as F, InnerContainer as G, NotificationRefreshing as M } from "./styles.js";
 import "../../../index-uEuzH3jr.js";
 import "lodash.throttle";
 import "../../theme/constants.js";
@@ -41,6 +42,8 @@ import "react-virtualized-auto-sizer";
 import "../../skeleton/index.js";
 import "../../skeleton/styles.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../../gamification/onboarding/invitingUser/index.js";
+import "../../gamification/onboarding/invitingUser/styles.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../useClipboardCopy.js";
@@ -59,124 +62,127 @@ 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 S = (s) => {
-  const [t, p] = w(0), i = x(null), m = R((o) => {
-    i.current = o;
+const U = (p) => {
+  const [t, n] = y(0), i = E(null), e = R((r) => {
+    i.current = r;
   }, []);
   I(() => {
-    var r;
-    const o = (r = i.current) == null ? void 0 : r.getBoundingClientRect();
-    o && p(o.height);
-  }, [s]);
-  const n = R((o) => {
-    p(o);
+    var o;
+    const r = (o = i.current) == null ? void 0 : o.getBoundingClientRect();
+    r && n(r.height);
+  }, [p]);
+  const s = R((r) => {
+    n(r);
   }, []);
-  return [m, t, n];
-}, U = ({
-  sdk: s,
+  return [e, t, s];
+}, K = ({
+  sdk: p,
   notification: t,
-  appNode: p,
+  appNode: n,
   sdkInDesktopView: i
 }) => {
-  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, {
+  var c, u;
+  const {
+    sdk: e
+  } = q(), [s, r, o] = U(t.id);
+  return t.type === g.QUESTION ? /* @__PURE__ */ w(b, {
+    children: [/* @__PURE__ */ m(z, {
+      ref: s,
+      children: /* @__PURE__ */ m(T, {
         ...t
       })
-    }), /* @__PURE__ */ k(z, {
+    }), /* @__PURE__ */ w(F, {
       style: {
-        height: t.hiding ? 0 : n
+        height: t.hiding ? 0 : r
       },
       hiding: t.hiding,
-      children: [/* @__PURE__ */ e(F, {
+      children: [/* @__PURE__ */ m(G, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ e(T, {
-          ...t
+        children: /* @__PURE__ */ m(T, {
+          ...t,
+          controlVideo: e == null ? void 0 : e.controlVideoPlayer
         })
-      }), /* @__PURE__ */ e(G, {}, t.id)]
+      }), /* @__PURE__ */ m(M, {}, t.id)]
     })]
-  }) : t.type === d.QUESTION_RESOLVED && ((c = (r = t.data) == null ? void 0 : r.question) != null && c.predictionResult) ? /* @__PURE__ */ e(B, {
+  }) : t.type === g.QUESTION_RESOLVED && ((u = (c = t.data) == null ? void 0 : c.question) != null && u.predictionResult) ? /* @__PURE__ */ m(H, {
     style: {
-      height: t.hiding ? 0 : n
+      height: t.hiding ? 0 : r
     },
     saveHeight: o,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === d.ONBOARDING ? /* @__PURE__ */ e(H, {
+  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ m(Q, {
     style: {
-      height: t.hiding ? 0 : n
+      height: t.hiding ? 0 : r
     },
     saveHeight: o,
-    sdk: s,
+    sdk: p,
     notification: t,
     sdkInDesktopView: i,
-    appNode: p
+    appNode: n
   }) : null;
-}, Wt = ({
-  sdk: s,
+}, ti = ({
+  sdk: p,
   headerNode: t,
-  scrollNode: p,
+  scrollNode: n,
   responsiveStore: i,
-  appNode: m,
-  scrollStore: n
+  appNode: e,
+  scrollStore: s
 }) => {
-  const [o] = w(s.getNotificationsStore()), r = a(o), {
+  const [r] = y(p.getNotificationsStore()), o = k(r), {
     tabsShown: c
-  } = a(n, {
+  } = k(s, {
     keys: ["tabsShown"]
   }), {
-    sdkInView: y,
+    sdkInView: u,
     sdkInDesktopView: C
-  } = a(i, {
+  } = k(i, {
     keys: ["sdkInView", "sdkInDesktopView"]
-  }), [u, h] = w(null), l = O(() => {
-    if (!(r != null && r.size))
+  }), [d, h] = y(null), l = O(() => {
+    if (!(o != null && o.size))
       return null;
-    for (const f of r.values())
-      if (f.type === d.ONBOARDING)
-        return f;
-    return r.values().next().value;
-  }, [r]);
+    for (const a of o.values())
+      if (a.type === g.ONBOARDING)
+        return a;
+    return o.values().next().value;
+  }, [o]);
   I(() => {
     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);
+      s.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"}`,
+    u || h(null);
+  }, [u]);
+  const x = O(() => {
+    var V, D;
+    const f = i.get().sdkInDesktopView ? e : t;
+    return d && f.current && P.createPortal(/* @__PURE__ */ m(j, {
+      title: `New ${((D = B[(V = d.data) == null ? void 0 : V.questionType]) == null ? void 0 : D.label) || "notification"}`,
       onClick: () => {
         var N;
-        i.get().sdkInDesktopView ? (N = p.current) == null || N.scrollTo({
+        i.get().sdkInDesktopView ? (N = n.current) == null || N.scrollTo({
           top: 0,
           behavior: "smooth"
-        }) : q(m, {
+        }) : A(e, {
           behavior: "smooth"
         }), h(null);
       },
       className: c ? "c1d7yse1" : void 0
-    }), g.current) || null;
-  }, [u, m, t, p, c, i]);
-  return /* @__PURE__ */ k(b, {
-    children: [!u && l && /* @__PURE__ */ e(U, {
+    }), f.current) || null;
+  }, [d, e, t, n, c, i]);
+  return /* @__PURE__ */ w(b, {
+    children: [!d && l && /* @__PURE__ */ m(K, {
       sdkInDesktopView: C,
       headerNode: t,
-      appNode: m,
-      sdk: s,
+      appNode: e,
+      sdk: p,
       notification: l
-    }), E]
+    }), x]
   });
 };
 export {
-  Wt as SDKNotifications
+  ti as SDKNotifications
 };

package/lib/ui/app/masters.js

@@ -1,17 +1,18 @@
-import { jsxs as f, jsx as m } from "react/jsx-runtime";
-import { useRef as u, useEffect as N } from "react";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { useRef as u, useEffect as C, useMemo as x } from "react";
 import { resetCss as v } from "../theme/theme.js";
 import { ActiveFeature as A } from "./Features/index.js";
-import { MastersNavigation as C } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as I } from "./Notifications/index.js";
-import { SDKContainer as x, SDKScrollContainer as B } from "./styles.js";
-import { useMastersApp as F } from "./useMastersApp.js";
-import { useSdkFeature as j } from "./useSdkFeature.js";
-import { useSdkResponsive as k } from "./useSdkResponsive.js";
-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 { MastersNavigation as I } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as M } from "./Notifications/index.js";
+import { SDKContainer as B, SDKScrollContainer as F } from "./styles.js";
+import { useMastersApp as j } from "./useMastersApp.js";
+import { MastersContext as D } from "./useMastersContext.js";
+import { useSdkFeature as E } from "./useSdkFeature.js";
+import { useSdkResponsive as K } from "./useSdkResponsive.js";
+import { useSdkScroll as L } from "./useSdkScroll.js";
+import { ChannelsButtonId as O } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as R } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as T } from "../navigation/button/FeaturedGroups.js";
 import "../theme/breakpoints.js";
 import "../theme/constants.js";
 import "@streamlayer/sdk-web-types";
@@ -56,6 +57,8 @@ import "react-virtualized-auto-sizer";
 import "../skeleton/index.js";
 import "../skeleton/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../gamification/onboarding/invitingUser/index.js";
+import "../gamification/onboarding/invitingUser/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "./useClipboardCopy.js";
@@ -77,71 +80,79 @@ import "../gamification/question/notification/pill/index.js";
 import "../gamification/question/notification/pill/styles.js";
 import "lodash.throttle";
 import "../../index-keh7OLCY.js";
-const M = ({ sdk: o, className: s, scrollStore: a, appNode: t, scrollNode: p, headerNode: r, responsiveStore: i }) => {
-  const [, n] = j(o);
-  return /* @__PURE__ */ m(
+const b = ({ sdk: t, className: s, scrollStore: a, appNode: o, scrollNode: p, headerNode: i, responsiveStore: m }) => {
+  const [, n] = E(t);
+  return /* @__PURE__ */ r(
     A,
     {
       className: s,
       scrollNode: p,
-      appNode: t,
+      appNode: o,
       scrollStore: a,
       feature: n,
-      headerNode: r,
-      responsiveStore: i,
-      sdk: o
+      headerNode: i,
+      responsiveStore: m,
+      sdk: t
     }
   );
-}, po = ({ sdk: o, overlays: s, children: a }) => {
-  const t = u(null), p = u(null), [r] = k(t), [i, n] = D(t, r), { sdkEnabled: l, sdkReady: c, activeOverlay: e, activateAndLoadOverlay: S, activateEventWithId: h, deactivate: g, isLogged: y } = F(o);
-  return N(() => {
+}, co = ({ sdk: t, overlays: s, children: a }) => {
+  const o = u(null), p = u(null), [i] = K(o), [m, n] = L(o, i), { sdkEnabled: l, sdkReady: d, activeOverlay: e, activateAndLoadOverlay: S, activateEventWithId: h, deactivate: g, isLogged: y } = j(t);
+  C(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ f(x, { ref: t, children: [
-    l && /* @__PURE__ */ m(
-      C,
+  }, []);
+  const N = x(() => ({ sdk: t }), [t]);
+  return /* @__PURE__ */ r(D.Provider, { value: N, children: /* @__PURE__ */ f(B, { ref: o, children: [
+    l && /* @__PURE__ */ r(
+      I,
       {
         ref: p,
-        sdkReady: c,
+        sdkReady: d,
         activeOverlay: e,
         className: v,
-        setActiveOverlay: (d) => S("", d),
+        setActiveOverlay: (c) => S("", c),
         scrollToTop: () => {
-          var d;
-          return (d = i.current) == null ? void 0 : d.scrollTo(0, 0);
+          var c;
+          return (c = m.current) == null ? void 0 : c.scrollTo(0, 0);
         },
-        responsiveStore: r
+        responsiveStore: i
       }
     ),
-    /* @__PURE__ */ f(B, { className: "sl-hide-on-modal", ref: i, "data-nav": l.toString(), children: [
-      c && /* @__PURE__ */ m(
-        I,
+    /* @__PURE__ */ f(F, { className: "sl-hide-on-modal", ref: m, "data-nav": l.toString(), children: [
+      d && /* @__PURE__ */ r(
+        M,
         {
-          sdk: o,
-          scrollNode: i,
+          sdk: t,
+          scrollNode: m,
           headerNode: p,
-          appNode: t,
+          appNode: o,
           scrollStore: n,
-          responsiveStore: r
+          responsiveStore: i
         }
       ),
-      /* @__PURE__ */ m("div", { style: !l || e === E ? {} : { display: "none" }, children: a && a({ activateEventWithId: h, deactivate: g }) }),
-      s && e === K && s[e],
-      c && e === L && /* @__PURE__ */ m(
-        M,
+      /* @__PURE__ */ r("div", { style: !l || e === O ? {} : { display: "none" }, children: a && a({ activateEventWithId: h, deactivate: g }) }),
+      s && e === R && s[e],
+      d && e === T && /* @__PURE__ */ r(
+        b,
         {
           scrollStore: n,
-          responsiveStore: r,
-          scrollNode: i,
-          appNode: t,
+          responsiveStore: i,
+          scrollNode: m,
+          appNode: o,
           headerNode: p,
           className: v,
-          sdk: o
+          sdk: t
         }
       )
     ] }),
-    l && !y && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
-  ] });
+    l && !y && /* @__PURE__ */ r(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
+        children: "You are not logged in."
+      }
+    )
+  ] }) });
 };
 export {
-  po as MastersApp
+  co as MastersApp
 };

package/lib/ui/app/useMastersApp.js

@@ -1,9 +1,9 @@
-import { useStore as d } from "@nanostores/react";
-import { useRef as y, useState as v, useCallback as I, useEffect as c } from "react";
-import { FeatureType as h } from "@streamlayer/sdk-web-types";
+import { useStore as A } from "@nanostores/react";
+import { useRef as y, useState as d, useCallback as z, useEffect as u } from "react";
+import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as n } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as i } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as p } from "../navigation/button/Channels.js";
 import "react/jsx-runtime";
 import "../navigation/button/LeaderBoard.js";
 import "@linaria/react";
@@ -13,28 +13,30 @@ import "../navigation/button/styles.js";
 import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../theme/constants.js";
-const W = (e) => {
-  const a = y(""), [m, f] = v(!1), A = d(e.status), i = d(e.userId()), r = A === "ready", [s, u] = v(n), p = I(
-    (t, o) => {
-      u(o), o === n ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
-        e.openFeature(h.GAMES);
+const j = (e) => {
+  const c = y(""), [S, o] = d(!1), E = A(e.status), a = A(e.userId()), f = A(e.getActiveFeature()), n = E === "ready", [l, r] = d(i), m = z(
+    (t, s) => {
+      r(s), s === i ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
+        e.openFeature(v.GAMES);
       })) : e.closeFeature(!1);
     },
     [e]
   );
-  c(() => {
-    !r && s === n && (u(l), e.closeFeature(!0));
-  }, [r, s, e]);
-  const g = (t) => {
-    a.current = t, f(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: o, err: S }) => {
-      if (S) {
-        p(t, l);
+  u(() => {
+    !n && l === i && (r(p), e.closeFeature(!0));
+  }, [n, l, e]), u(() => {
+    f === v.GAMES ? r(i) : f === v.UNSET && r(p);
+  }, [f]);
+  const F = (t) => {
+    c.current = t, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: g }) => {
+      if (g) {
+        m(t, p);
         return;
       }
-      if (o) {
-        e.isUserAuthorized().then((E) => {
-          if (E) {
-            p(t, n);
+      if (s) {
+        e.isUserAuthorized().then((h) => {
+          if (h) {
+            m(t, i);
             return;
           } else
             e.disableApp();
@@ -43,32 +45,31 @@ const W = (e) => {
       }
     });
   }, b = () => {
-    f(!1), e.disableApp();
+    o(!1), e.disableApp();
   };
-  return c(() => {
-    if (!i) {
-      r && (u(l), e.disableApp());
+  return u(() => {
+    if (!a) {
+      n && (r(p), e.disableApp());
       return;
     }
-    if (i && a.current && m) {
+    if (a && c.current && S) {
       e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
-        e.createEventSession(a.current);
+        e.createEventSession(c.current);
       });
       return;
     }
-  }, [i]), c(() => {
-    const t = e.getInviterId();
-    console.log("you invited by", t), t && e.status.get() === "disabled" && (console.log("deep link cb called"), e.deepLinkHandled());
-  }, [e]), {
-    sdkEnabled: m,
-    sdkReady: r,
-    activeOverlay: s,
-    activateAndLoadOverlay: p,
-    activateEventWithId: g,
+  }, [a]), u(() => () => {
+    o(!1), e.disableApp();
+  }, [o, e]), {
+    sdkEnabled: S,
+    sdkReady: n,
+    activeOverlay: l,
+    activateAndLoadOverlay: m,
+    activateEventWithId: F,
     deactivate: b,
-    isLogged: !!i
+    isLogged: !!a
   };
 };
 export {
-  W as useMastersApp
+  j as useMastersApp
 };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const MastersContext: import("react").Context<{
+    sdk: StreamLayerSDK | null;
+}>;
+export declare const useMastersContext: () => {
+    sdk: StreamLayerSDK | null;
+};

package/lib/ui/app/useMastersContext.js

@@ -0,0 +1,8 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  sdk: null
+}), n = () => e(o);
+export {
+  o as MastersContext,
+  n as useMastersContext
+};

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

@@ -6,8 +6,8 @@ type ResponsiveData = {
         name: BREAKPOINTS_KEYS;
         size: (typeof BREAKPOINTS)[BREAKPOINTS_KEYS];
     };
-    sdkInView?: boolean;
-    sdkInDesktopView?: boolean;
+    sdkInView: boolean;
+    sdkInDesktopView: boolean;
 };
 export type ResponsiveStore = MapStore<ResponsiveData>;
 export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];

package/lib/ui/gamification/onboarding/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { HeaderNodeRef, type AppNodeRef } from '../../app/masters';
 import { OnboardingStep } from './slides/onboarding-instructions';
 import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
 import { OnboardingRule } from './slides/onboarding-rules';
 type OnboardingType = OnboardingInviteCardProps & {
     gamification: Gamification;
+    sdk: StreamLayerSDK;
     steps?: OnboardingStep[];
     rules?: OnboardingRule[];
     rulesBtnLabel?: string;
@@ -16,7 +18,8 @@ type OnboardingType = OnboardingInviteCardProps & {
     inviteCardBtnLabel?: string;
     loading: boolean;
     renderToNode?: AppNodeRef | HeaderNodeRef;
+    inviterName?: string;
     onClose: () => void;
 };
-export declare const Onboarding: React.FC<OnboardingType>;
+export declare const OnboardingUI: React.FC<OnboardingType>;
 export {};