@streamlayer/react-ui 1.9.0 → 1.11.0

package/lib/app/app/Navigation/index.js

@@ -1,72 +1,112 @@
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import { styled as g } from "@linaria/react";
-import { useStore as l } from "@nanostores/react";
-import { forwardRef as h, useMemo as m } from "react";
-import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
-import { FeatureType as d } from "@streamlayer/sdk-web-types";
-import { SvgIcon as F } from "../../../ui/icons/index.js";
-import { Button as n } from "../../../ui/navigation/button/index.js";
-import { Navigation as A, NavigationItems as v } from "../../../ui/navigation/masters.js";
-const C = () => F, x = /* @__PURE__ */ g(C())({
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { cx as S } from "@linaria/core";
+import { styled as n } from "@linaria/react";
+import { useStore as m } from "@nanostores/react";
+import { forwardRef as y, useMemo as h } from "react";
+import { AvailableFeatures as I } from "@streamlayer/sdk-web-features";
+import { FeatureType as u } from "@streamlayer/sdk-web-types";
+import { SvgIcon as g } from "../../../ui/icons/index.js";
+import { Navigation as A, NavigationItems as C } from "../../../ui/navigation/index.js";
+import { Button as t } from "../../../ui/navigation/button/index.js";
+const F = () => g, x = /* @__PURE__ */ n(F())({
   name: "ButtonIcon",
   class: "b11wpe79",
   propsAsIs: !0
-}), K = h(({
-  sdk: i,
-  className: f
-}, u) => {
-  const t = l(i.sdkStore.organizationSettings), r = l(i.sdkStore.streamSettings), a = l(i.getActiveFeature()), p = m(() => {
-    const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
-    return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), s = m(() => [...p.filter(({
-    enableSdkButton: o,
-    type: c
-  }) => c === d.GAMES || o).map((o) => ({
-    id: o.type,
-    onClick: () => i.openFeature(o.type),
-    disabled: !(o.type in S),
-    label: o.name,
-    icon: /* @__PURE__ */ e("img", {
-      src: o.icon,
+}), N = /* @__PURE__ */ n("div")({
+  name: "Container",
+  class: "calnblm",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ n("div")({
+  name: "Title",
+  class: "t1438p52",
+  propsAsIs: !1
+}), B = /* @__PURE__ */ n("div")({
+  name: "CloseIconWrap",
+  class: "c17srj38",
+  propsAsIs: !1
+}), j = () => g, w = /* @__PURE__ */ n(j())({
+  name: "CloseIcon",
+  class: "clqia8k",
+  propsAsIs: !0
+}), G = "hf5w958", H = y(({
+  sdk: s,
+  className: c
+}, l) => {
+  const i = () => {
+    s.closeFeature();
+  };
+  return /* @__PURE__ */ v(A, {
+    className: S(c, G),
+    children: [/* @__PURE__ */ v(N, {
+      children: [/* @__PURE__ */ o(b, {
+        children: "Live Challenge"
+      }), /* @__PURE__ */ o(B, {
+        onClick: i,
+        children: /* @__PURE__ */ o(w, {
+          name: "icon-cross"
+        })
+      })]
+    }), /* @__PURE__ */ o("div", {
+      ref: l
+    })]
+  });
+}), R = y(({
+  sdk: s,
+  className: c
+}, l) => {
+  const i = m(s.sdkStore.organizationSettings), r = m(s.sdkStore.streamSettings), a = m(s.getActiveFeature()), f = h(() => {
+    const e = (r == null ? void 0 : r.data) || (i == null ? void 0 : i.data);
+    return e != null && e.overlays ? e.overlays : [];
+  }, [i, r]), p = h(() => [...f.filter(({
+    enableSdkButton: e,
+    type: d
+  }) => d === u.GAMES || e).map((e) => ({
+    id: e.type,
+    onClick: () => s.openFeature(e.type),
+    disabled: !(e.type in I),
+    label: e.name,
+    icon: /* @__PURE__ */ o("img", {
+      src: e.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    position: o.position * 10
-  }))].sort((o, c) => o.position - c.position), [p, i]);
-  return /* @__PURE__ */ y(A, {
-    className: f,
-    children: [s.length !== 0 && /* @__PURE__ */ e(v, {
-      children: [/* @__PURE__ */ e(n, {
+    position: e.position * 10
+  }))].sort((e, d) => e.position - d.position), [f, s]);
+  return /* @__PURE__ */ v(A, {
+    className: c,
+    children: [p.length !== 0 && /* @__PURE__ */ o(C, {
+      children: [/* @__PURE__ */ o(t, {
         id: "Channels",
-        onClick: () => i.closeFeature(),
+        onClick: () => s.closeFeature(),
         label: "Channels",
         active: a === 0
-      }, "Channels"), ...s.map((o) => o.id === d.GAMES ? /* @__PURE__ */ e(n, {
-        ...o,
-        active: o.id === a,
+      }, "Channels"), ...p.map((e) => e.id === u.GAMES ? /* @__PURE__ */ o(t, {
+        ...e,
+        active: e.id === a,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ e(x, {
+        icon: /* @__PURE__ */ o(x, {
           name: "icon-btn-feature-groups",
-          "data-selected": o.id === a
+          "data-selected": e.id === a
         })
-      }, o.id) : /* @__PURE__ */ e(n, {
-        ...o,
+      }, e.id) : /* @__PURE__ */ o(t, {
+        ...e,
         icon: void 0,
-        active: o.id === a
-      }, o.id))]
-    }), !s.length && /* @__PURE__ */ e(v, {
-      children: [/* @__PURE__ */ e(n, {
+        active: e.id === a
+      }, e.id))]
+    }), !p.length && /* @__PURE__ */ o(C, {
+      children: [/* @__PURE__ */ o(t, {
         id: "empty",
         label: "No Features...",
         active: !1,
         disabled: !0
       }, "empty")]
-    }), /* @__PURE__ */ e("div", {
-      ref: u
+    }), /* @__PURE__ */ o("div", {
+      ref: l
     })]
   });
 });
 export {
-  K as SDKNavigation
+  H as SDKHeader,
+  R as SDKNavigation
 };

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

@@ -1,163 +1,175 @@
-import { jsxs as a, Fragment as D, jsx as c } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
+import { jsxs as y, Fragment as b, jsx as u } from "react/jsx-runtime";
+import { cx as V } from "@linaria/core";
 import { useStore as g } from "@nanostores/react";
-import { useAppContext as T } from "../useAppContext.js";
-import { scrollIntoAppView as E } from "../../useSdkScroll.js";
-import { useState as p, useMemo as O, useEffect as h, useRef as b, useCallback as w } from "react";
-import { r as q } from "../../../index-B1QdimmR.js";
-import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as f } from "@streamlayer/sdk-web-notifications";
-import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
-import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
-import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
-const j = (o) => {
-  const [t, u] = p(0), i = b(null), d = w((r) => {
-    i.current = r;
-  }, []);
-  h(() => {
-    var l;
-    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
-    r && u(r.height);
-  }, [o]);
-  const n = w((r) => {
-    u(r);
+import { useAppContext as O } from "../useAppContext.js";
+import { scrollIntoAppView as T } from "../../useSdkScroll.js";
+import { useState as k, useMemo as D, useEffect as h, useRef as E, useCallback as w } from "react";
+import { r as R } from "../../../index-B1QdimmR.js";
+import { eventBus as q } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as p } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as C } from "../../../ui/gamification/constants.js";
+import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
+import { PredictionResult as x } from "../../../ui/gamification/question/notification/prediction-result/index.js";
+import { Onboarding as P } from "./Onboarding/index.js";
+import { HiddenContainer as z, Container as A, InnerContainer as B, NotificationRefreshing as S, Pill as v } from "./styles.js";
+const H = (i) => {
+  const [e, d] = k(0), s = E(null), l = D(() => new ResizeObserver((o) => {
+    var c;
+    for (const r of o)
+      if (r.contentBoxSize) {
+        const t = (c = s.current) == null ? void 0 : c.getBoundingClientRect();
+        t && d(t.height);
+      }
+  }), []), n = w((o) => {
+    s.current = o;
+  }, []), f = w((o) => {
+    d(o);
   }, []);
-  return [d, t, n];
-}, z = ({
-  sdk: o,
-  notification: t,
-  appNode: u,
-  responsiveStore: i
+  return h(() => {
+    const o = s.current;
+    return o ? (l.observe(o), () => {
+      l.unobserve(o);
+    }) : () => {
+    };
+  }, [i]), h(() => () => {
+    l.disconnect();
+  }), [n, e, f];
+}, Q = ({
+  sdk: i,
+  notification: e,
+  appNode: d,
+  responsiveStore: s
 }) => {
-  var s, e;
+  var r, t;
   const {
-    sdkInDesktopView: d
-  } = g(i, {
+    sdkInDesktopView: l
+  } = g(s, {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: n
-  } = T(), [r, l, m] = j(t.id);
-  return t.type === f.QUESTION ? /* @__PURE__ */ a(D, {
-    children: [/* @__PURE__ */ c(A, {
-      ref: r,
-      children: /* @__PURE__ */ c(V, {
-        ...t
+  } = O(), [f, o, c] = H(e.id);
+  return e.type === p.QUESTION ? /* @__PURE__ */ y(b, {
+    children: [/* @__PURE__ */ u(z, {
+      ref: f,
+      children: /* @__PURE__ */ u(N, {
+        ...e
       })
-    }), /* @__PURE__ */ a(B, {
+    }), /* @__PURE__ */ y(A, {
       style: {
-        height: t.hiding ? 0 : l
+        height: e.hiding ? 0 : o
       },
-      hiding: t.hiding,
-      children: [/* @__PURE__ */ c(H, {
+      hiding: e.hiding,
+      children: [/* @__PURE__ */ u(B, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(V, {
-          ...t,
+        children: /* @__PURE__ */ u(N, {
+          ...e,
           controlVideo: n == null ? void 0 : n.controlVideoPlayer
         })
-      }), /* @__PURE__ */ c(Q, {}, t.id)]
+      }), /* @__PURE__ */ u(S, {}, e.id)]
     })]
-  }) : t.type === f.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : e.type === p.QUESTION_RESOLVED && ((t = (r = e.data) == null ? void 0 : r.question) != null && t.predictionResult) ? /* @__PURE__ */ u(x, {
     style: {
-      height: t.hiding ? 0 : l
+      height: e.hiding ? 0 : o
     },
-    saveHeight: m,
-    close: t.close,
-    hiding: t.hiding,
-    ...t.data.question
-  }) : t.type === f.ONBOARDING ? /* @__PURE__ */ c(x, {
+    saveHeight: c,
+    close: e.close,
+    hiding: e.hiding,
+    ...e.data.question
+  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(P, {
     style: {
-      height: t.hiding ? 0 : l
+      height: e.hiding ? 0 : o
     },
-    saveHeight: m,
-    sdk: o,
-    notification: t,
-    sdkInDesktopView: d,
-    appNode: u,
-    responsiveStore: i
+    saveHeight: c,
+    sdk: i,
+    notification: e,
+    sdkInDesktopView: l,
+    appNode: d,
+    responsiveStore: s
   }) : null;
-}, F = "p7vfi6t", L = ({
-  pill: o,
-  setPill: t,
-  appNode: u,
-  headerNode: i,
-  scrollNode: d,
+}, U = "p7vfi6t", j = ({
+  pill: i,
+  setPill: e,
+  appNode: d,
+  headerNode: s,
+  scrollNode: l,
   responsiveStore: n,
-  scrollStore: r
+  scrollStore: f
 }) => {
-  var k, y;
+  var m, a;
   const {
-    screen: l
+    screen: o
   } = g(n, {
     keys: ["screen"]
   }), {
-    tabsShown: m,
-    scrollPosition: s
-  } = g(r, {
+    tabsShown: c,
+    scrollPosition: r
+  } = g(f, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
-    n.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, n, t]);
-  const e = n.get().sdkInDesktopView ? u : i;
-  return !o || !e.current ? null : q.createPortal(/* @__PURE__ */ c(U, {
-    title: o.type === f.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = o.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    n.get().sdkInDesktopView ? r < 50 && e(null) : r > -50 && e(null);
+  }, [r, n, e]);
+  const t = n.get().sdkInDesktopView ? d : s;
+  return !i || !t.current ? null : R.createPortal(/* @__PURE__ */ u(v, {
+    title: i.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((a = C[(m = i.data) == null ? void 0 : m.questionType]) == null ? void 0 : a.label) || "notification"}`,
     onClick: () => {
       var I;
-      n.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+      n.get().sdkInDesktopView ? (I = l.current) == null || I.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : E(u, l.size, {
+      }) : T(d, o.size, {
         behavior: "smooth"
-      }), t(null);
+      }), e(null);
     },
-    className: N(m && F, "sl-pill-button")
-  }), e.current);
-}, it = ({
-  sdk: o,
-  headerNode: t,
-  scrollNode: u,
-  responsiveStore: i,
-  appNode: d,
+    className: V(c && U, "sl-pill-button")
+  }), t.current);
+}, oe = ({
+  sdk: i,
+  headerNode: e,
+  scrollNode: d,
+  responsiveStore: s,
+  appNode: l,
   scrollStore: n
 }) => {
-  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = O(() => o.getActiveNotification(), [o, l]);
+  const [f] = k(i.getNotificationsStore()), o = g(f), [c, r] = k(null), t = D(() => i.getActiveNotification(), [i, o]);
   return h(() => {
-    e && C.emit("notification", {
+    t && q.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: e.data.questionId,
-        questionType: e.data.questionType
+        questionId: t.data.questionId,
+        questionType: t.data.questionType
       }
     });
-  }, [e]), h(() => {
-    e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      n.get().scrollPosition !== 0 && s(e);
+  }, [t]), h(() => {
+    const {
+      sdkInDesktopView: m,
+      sdkInView: a
+    } = s.get();
+    t && (m || a) && (!m && a && r(t), m && window.requestAnimationFrame(() => {
+      n.get().scrollPosition !== 0 && r(t);
     }));
-  }, [e]), h(() => {
-    e || s(null);
-  }, [e]), /* @__PURE__ */ a(D, {
-    children: [!m && e && /* @__PURE__ */ c(z, {
-      headerNode: t,
-      appNode: d,
-      sdk: o,
-      notification: e,
-      responsiveStore: i
-    }), m && /* @__PURE__ */ c(L, {
-      pill: m,
-      setPill: s,
-      appNode: d,
-      notification: e,
-      headerNode: t,
-      scrollNode: u,
+  }, [t]), h(() => {
+    t || r(null);
+  }, [t]), /* @__PURE__ */ y(b, {
+    children: [!c && t && /* @__PURE__ */ u(Q, {
+      appNode: l,
+      sdk: i,
+      notification: t,
+      responsiveStore: s
+    }), c && /* @__PURE__ */ u(j, {
+      pill: c,
+      setPill: r,
+      appNode: l,
+      notification: t,
+      headerNode: e,
+      scrollNode: d,
       scrollStore: n,
-      responsiveStore: i
+      responsiveStore: s
     })]
   });
 };
 export {
-  it as SDKNotifications
+  oe as SDKNotifications
 };

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

@@ -1,28 +1,28 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { useState as c, useEffect as f } from "react";
-import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as S } from "@streamlayer/sdk-web-types";
-import { Points as l } from "../../../ui/gamification/points/index.js";
+import { useStore as f } from "@nanostores/react";
+import { useState as c, useEffect as l } from "react";
+import { FeatureStatus as u } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import { Points as S } from "../../../ui/gamification/points/index.js";
 const a = ({ gamification: e }) => {
-  const s = e.userSummary.$store, [r, u] = c(0);
-  return f(() => {
-    const m = s.subscribe((t) => {
+  const s = e.userSummary.$store, [r, m] = c(0);
+  return l(() => {
+    const i = s.subscribe((t) => {
       var o;
-      (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
+      (o = t == null ? void 0 : t.summary) != null && o.points && m(t.summary.points);
     });
     return () => {
-      m();
+      i();
     };
-  }, [s]), /* @__PURE__ */ n(l, { points: r, onClick: () => {
-    e.status.get() === p.Suspended && e.openFeature();
+  }, [s]), /* @__PURE__ */ n(S, { points: r, onClick: () => {
+    e.status.get() === u.Suspended ? e.openFeature() : e.status.get() === u.Ready && e.closeFeature(!1);
   } });
-}, h = ({ sdk: e }) => {
-  if (!i(e.featuresList.getStore()))
+}, k = ({ sdk: e }) => {
+  if (!f(e.featuresList.getStore()))
     return null;
-  const r = e.getFeature(S.GAMES);
+  const r = e.getFeature(p.GAMES);
   return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;
 };
 export {
-  h as StreamLayerSDKPoints
+  k as StreamLayerSDKPoints
 };

package/lib/app/app/index.d.ts

@@ -7,5 +7,6 @@ export type AppAppProps = {
     sdk: StreamLayerSDK;
     event?: string;
     topNavigation?: boolean;
+    enabled?: boolean;
 };
 export declare const App: React.FC<AppAppProps>;