@streamlayer/react-ui 1.11.4 → 1.12.0

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

@@ -1,70 +1,64 @@
-import { jsx as r, jsxs as x, Fragment as L } from "react/jsx-runtime";
-import { styled as w } from "@linaria/react";
+import { jsx as r, jsxs as L, Fragment as x } from "react/jsx-runtime";
+import { styled as I } from "@linaria/react";
 import { useStore as T } from "@nanostores/react";
-import { useImagesPreload as B } from "../../../useImagesPreload.js";
-import { scrollIntoAppView as O } from "../../../useSdkScroll.js";
-import { useRef as E, useState as A, useMemo as _, useLayoutEffect as M, useEffect as P } from "react";
-import { FeatureType as R } from "@streamlayer/sdk-web-types";
-import { OnboardingUI as V } from "../../../../ui/gamification/onboarding/index.js";
-import { ModalPortal as W } from "../../../../ui/modal/index.js";
-import { ShowIn as $ } from "../../../../ui/show-in/index.js";
-import { Onboarding as S } from "./Notification/index.js";
+import { useImagesPreload as O } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as _ } from "../../../useSdkScroll.js";
+import { useRef as E, useState as A, useMemo as F, useLayoutEffect as M, useEffect as R } from "react";
+import { FeatureType as V } from "@streamlayer/sdk-web-types";
+import { OnboardingUI as W } from "../../../../ui/gamification/onboarding/index.js";
+import { ModalPortal as $ } from "../../../../ui/modal/index.js";
+import { ShowIn as j } from "../../../../ui/show-in/index.js";
+import { Onboarding as w } from "./Notification/index.js";
 const C = [{
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
-  headline: /* @__PURE__ */ x(L, {
-    children: ["Welcome to ", /* @__PURE__ */ r("br", {}), " StreamLayer +"]
+  headline: /* @__PURE__ */ L(x, {
+    children: ["Welcome to ", /* @__PURE__ */ r("br", {}), " Live Challenge"]
   })
 }, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
-  headline: "Get real-time insights"
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_2.png",
+  headline: "Live insights, polls, trivia and predictions."
 }, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
-  headline: "Predictions, trivia & polls synced to match play"
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
-  headline: "Win points for every answer you get right"
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
-  headline: "Compete against friends on the leaderboard"
-}], j = /* @__PURE__ */ w("div")({
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
+  headline: "Win points and play against friends."
+}], P = /* @__PURE__ */ I("div")({
   name: "OnboardingContainer",
   class: "o1xni1kr",
   propsAsIs: !1
-}), G = () => $, q = /* @__PURE__ */ w(G())({
+}), q = () => j, z = /* @__PURE__ */ I(q())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
   propsAsIs: !0
-}), k = /* @__PURE__ */ w("div")({
+}), S = /* @__PURE__ */ I("div")({
   name: "InnerContainer",
   class: "i59uefw",
   propsAsIs: !1
-}), z = ({
+}), D = ({
   deepLink: l,
   onboardingOpts: e,
   notification: o,
-  gamification: p,
-  loading: i,
+  gamification: m,
+  loading: s,
   sdk: d
 }) => {
-  var c, a, h, b, f, y, s;
-  const u = T(p.friends.getStore()), [g, t] = A(void 0), v = _(() => {
-    var m, I;
+  var c, a, b, h, f, v, i;
+  const p = T(m.friends.getStore()), [g, t] = A(void 0), y = F(() => {
+    var u, k;
     const n = d.getInviter();
-    return n ? (I = (m = u.data) == null ? void 0 : m.find(({
-      slId: F
-    }) => F === n)) == null ? void 0 : I.name : "";
-  }, [u.data, d]);
-  return P(() => {
-    const n = l.$store.subscribe((m) => {
-      m && t(m.data);
+    return n ? (k = (u = p.data) == null ? void 0 : u.find(({
+      slId: B
+    }) => B === n)) == null ? void 0 : k.name : "";
+  }, [p.data, d]);
+  return R(() => {
+    const n = l.$store.subscribe((u) => {
+      u && t(u.data);
     });
     return () => {
       n();
     };
-  }, [l.$store]), /* @__PURE__ */ r(j, {
-    children: /* @__PURE__ */ r(V, {
-      loading: i,
+  }, [l.$store]), /* @__PURE__ */ r(P, {
+    children: /* @__PURE__ */ r(W, {
+      loading: s,
       rules: [{
         label: "Answer as many questions as you like.",
         icon: "icon-btn-feature-groups"
@@ -78,82 +72,82 @@ const C = [{
       rulesBtnLabel: (c = e.rules) == null ? void 0 : c.buttonLabel,
       rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (h = e.rules) == null ? void 0 : h.terms,
+      termsText: (b = e.rules) == null ? void 0 : b.terms,
       steps: C,
-      primaryColor: (b = e.inviteCard) == null ? void 0 : b.iconColor,
+      primaryColor: (h = e.inviteCard) == null ? void 0 : h.iconColor,
       inviteLink: g,
       inviteCardTitle: (f = e.inviteCard) == null ? void 0 : f.heading,
-      inviteCardSubtext: (y = e.inviteCard) == null ? void 0 : y.subtext,
-      inviteCardBtnLabel: (s = e.inviteCard) == null ? void 0 : s.buttonLabel,
+      inviteCardSubtext: (v = e.inviteCard) == null ? void 0 : v.subtext,
+      inviteCardBtnLabel: (i = e.inviteCard) == null ? void 0 : i.buttonLabel,
       onClose: () => {
         var n;
         (n = o.close) == null || n.call(o);
       },
-      gamification: p,
+      gamification: m,
       sdk: d,
-      inviterName: v
+      inviterName: y
     })
   });
 }, ne = ({
   sdk: l,
   notification: e,
   saveHeight: o,
-  style: p,
-  appNode: i,
+  style: m,
+  appNode: s,
   sdkInDesktopView: d,
-  responsiveStore: u
+  responsiveStore: p
 }) => {
-  const g = E(null), t = e.data.onboarding, [v, c] = A(t == null ? void 0 : t.instantOpen), a = l.getFeature(R.GAMES), h = _(() => C == null ? void 0 : C.map(({
-    graphicSrc: s
-  }) => s), []), {
-    screen: b
-  } = T(u, {
+  const g = E(null), t = e.data.onboarding, [y, c] = A(t == null ? void 0 : t.instantOpen), a = l.getFeature(V.GAMES), b = F(() => C == null ? void 0 : C.map(({
+    graphicSrc: i
+  }) => i), []), {
+    screen: h
+  } = T(p, {
     keys: ["screen"]
   });
   M(() => {
-    var s;
-    o(((s = g.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
+    var i;
+    o(((i = g.current) == null ? void 0 : i.getBoundingClientRect().height) || 0);
   }, [o]);
   const {
     loading: f,
-    throttled: y
-  } = B(h);
-  return v && a && t && i.current && !y ? /* @__PURE__ */ r(W, {
-    container: i,
+    throttled: v
+  } = O(b);
+  return y && a && t && s.current && !v ? /* @__PURE__ */ r($, {
+    container: s,
     useContainer: !d,
-    children: /* @__PURE__ */ r(z, {
+    children: /* @__PURE__ */ r(D, {
       notification: e,
       setOpened: c,
       gamification: a,
       onboardingOpts: t,
       deepLink: a.deepLink,
       loading: f,
-      renderToNode: i,
+      renderToNode: s,
       sdk: l
     })
-  }) : /* @__PURE__ */ x(L, {
-    children: [/* @__PURE__ */ r(k, {
+  }) : /* @__PURE__ */ L(x, {
+    children: [/* @__PURE__ */ r(S, {
       ref: g,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ r(S, {
+      children: /* @__PURE__ */ r(w, {
         close: () => {
         },
         action: () => {
         },
         onboarding: t
       })
-    }), /* @__PURE__ */ r(q, {
-      style: p,
+    }), /* @__PURE__ */ r(z, {
+      style: m,
       hiding: e.hiding,
-      children: /* @__PURE__ */ r(k, {
-        children: /* @__PURE__ */ r(S, {
+      children: /* @__PURE__ */ r(S, {
+        children: /* @__PURE__ */ r(w, {
           close: e.close,
           action: () => {
             var n;
-            c(!0), (((n = i.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && O(i, b.size, {
+            c(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && _(s, h.size, {
               behavior: "smooth"
             });
           },

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

@@ -9,4 +9,5 @@ export declare const SDKNotifications: React.FC<{
     headerNode: HeaderNodeRef;
     scrollStore: ScrollStore;
     responsiveStore: ResponsiveStore;
+    hasActiveFeature: boolean;
 }>;

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

@@ -1,9 +1,9 @@
-import { jsxs as y, Fragment as b, jsx as u } from "react/jsx-runtime";
+import { jsxs as k, 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 { useStore as y } from "@nanostores/react";
 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 { useState as I, useMemo as D, useEffect as a, 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";
@@ -11,52 +11,54 @@ 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);
+import { HiddenContainer as z, Container as A, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
+const v = (r) => {
+  const [e, d] = I(0), i = E(null), l = D(() => new ResizeObserver((o) => {
+    var h;
+    for (const c of o)
+      if (c.contentBoxSize) {
+        const n = (h = i.current) == null ? void 0 : h.getBoundingClientRect();
+        n && d(n.height);
       }
-  }), []), n = w((o) => {
-    s.current = o;
+  }), []), s = w((o) => {
+    i.current = o;
   }, []), f = w((o) => {
     d(o);
   }, []);
-  return h(() => {
-    const o = s.current;
+  return a(() => {
+    const o = i.current;
     return o ? (l.observe(o), () => {
       l.unobserve(o);
     }) : () => {
     };
-  }, [i]), h(() => () => {
+  }, [r]), a(() => () => {
     l.disconnect();
-  }), [n, e, f];
+  }), [s, e, f];
 }, Q = ({
-  sdk: i,
+  sdk: r,
   notification: e,
   appNode: d,
-  responsiveStore: s
+  responsiveStore: i,
+  hasActiveFeature: l
 }) => {
-  var r, t;
+  var t, m;
   const {
-    sdkInDesktopView: l
-  } = g(s, {
+    sdkInDesktopView: s
+  } = y(i, {
     keys: ["sdkInDesktopView"]
   }), {
-    sdk: n
-  } = O(), [f, o, c] = H(e.id);
-  return e.type === p.QUESTION ? /* @__PURE__ */ y(b, {
+    sdk: f
+  } = O(), [o, h, c] = v(e.id);
+  let n = h;
+  return l || (n = "auto"), e.type === p.QUESTION ? /* @__PURE__ */ k(b, {
     children: [/* @__PURE__ */ u(z, {
-      ref: f,
+      ref: o,
       children: /* @__PURE__ */ u(N, {
         ...e
       })
-    }), /* @__PURE__ */ y(A, {
+    }), /* @__PURE__ */ k(A, {
       style: {
-        height: e.hiding ? 0 : o
+        height: e.hiding ? 0 : n
       },
       hiding: e.hiding,
       children: [/* @__PURE__ */ u(B, {
@@ -65,13 +67,13 @@ const H = (i) => {
         },
         children: /* @__PURE__ */ u(N, {
           ...e,
-          controlVideo: n == null ? void 0 : n.controlVideoPlayer
+          controlVideo: f == null ? void 0 : f.controlVideoPlayer
         })
-      }), /* @__PURE__ */ u(S, {}, e.id)]
+      }), /* @__PURE__ */ u(H, {}, e.id)]
     })]
-  }) : e.type === p.QUESTION_RESOLVED && ((t = (r = e.data) == null ? void 0 : r.question) != null && t.predictionResult) ? /* @__PURE__ */ u(x, {
+  }) : e.type === p.QUESTION_RESOLVED && ((m = (t = e.data) == null ? void 0 : t.question) != null && m.predictionResult) ? /* @__PURE__ */ u(x, {
     style: {
-      height: e.hiding ? 0 : o
+      height: e.hiding ? 0 : h
     },
     saveHeight: c,
     close: e.close,
@@ -79,62 +81,63 @@ const H = (i) => {
     ...e.data.question
   }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(P, {
     style: {
-      height: e.hiding ? 0 : o
+      height: e.hiding ? 0 : n
     },
     saveHeight: c,
-    sdk: i,
+    sdk: r,
     notification: e,
-    sdkInDesktopView: l,
+    sdkInDesktopView: s,
     appNode: d,
-    responsiveStore: s
+    responsiveStore: i
   }) : null;
 }, U = "p7vfi6t", j = ({
-  pill: i,
+  pill: r,
   setPill: e,
   appNode: d,
-  headerNode: s,
+  headerNode: i,
   scrollNode: l,
-  responsiveStore: n,
+  responsiveStore: s,
   scrollStore: f
 }) => {
-  var m, a;
+  var t, m;
   const {
     screen: o
-  } = g(n, {
+  } = y(s, {
     keys: ["screen"]
   }), {
-    tabsShown: c,
-    scrollPosition: r
-  } = g(f, {
+    tabsShown: h,
+    scrollPosition: c
+  } = y(f, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  h(() => {
-    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"}`,
+  a(() => {
+    s.get().sdkInDesktopView ? c < 50 && e(null) : c > -50 && e(null);
+  }, [c, s, e]);
+  const n = s.get().sdkInDesktopView ? d : i;
+  return !r || !n.current ? null : R.createPortal(/* @__PURE__ */ u(S, {
+    title: r.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = C[(t = r.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
     onClick: () => {
-      var I;
-      n.get().sdkInDesktopView ? (I = l.current) == null || I.scrollTo({
+      var g;
+      s.get().sdkInDesktopView ? (g = l.current) == null || g.scrollTo({
         top: 0,
         behavior: "smooth"
       }) : T(d, o.size, {
         behavior: "smooth"
       }), e(null);
     },
-    className: V(c && U, "sl-pill-button")
-  }), t.current);
+    className: V(h && U, "sl-pill-button")
+  }), n.current);
 }, oe = ({
-  sdk: i,
+  sdk: r,
   headerNode: e,
   scrollNode: d,
-  responsiveStore: s,
+  responsiveStore: i,
   appNode: l,
-  scrollStore: n
+  scrollStore: s,
+  hasActiveFeature: f
 }) => {
-  const [f] = k(i.getNotificationsStore()), o = g(f), [c, r] = k(null), t = D(() => i.getActiveNotification(), [i, o]);
-  return h(() => {
+  const [o] = I(r.getNotificationsStore()), h = y(o), [c, n] = I(null), t = D(() => r.getActiveNotification(), [r, h]);
+  return a(() => {
     t && q.emit("notification", {
       action: "rendered",
       payload: {
@@ -142,31 +145,32 @@ const H = (i) => {
         questionType: t.data.questionType
       }
     });
-  }, [t]), h(() => {
+  }, [t]), a(() => {
     const {
       sdkInDesktopView: m,
-      sdkInView: a
-    } = s.get();
-    t && (m || a) && (!m && a && r(t), m && window.requestAnimationFrame(() => {
-      n.get().scrollPosition !== 0 && r(t);
+      sdkInView: g
+    } = i.get();
+    t && (m || g) && (!m && g && n(t), m && window.requestAnimationFrame(() => {
+      s.get().scrollPosition !== 0 && n(t);
     }));
-  }, [t]), h(() => {
-    t || r(null);
-  }, [t]), /* @__PURE__ */ y(b, {
+  }, [t]), a(() => {
+    t || n(null);
+  }, [t]), /* @__PURE__ */ k(b, {
     children: [!c && t && /* @__PURE__ */ u(Q, {
       appNode: l,
-      sdk: i,
+      sdk: r,
+      hasActiveFeature: f,
       notification: t,
-      responsiveStore: s
+      responsiveStore: i
     }), c && /* @__PURE__ */ u(j, {
       pill: c,
-      setPill: r,
+      setPill: n,
       appNode: l,
       notification: t,
       headerNode: e,
       scrollNode: d,
-      scrollStore: n,
-      responsiveStore: s
+      scrollStore: s,
+      responsiveStore: i
     })]
   });
 };

package/lib/app/app/index.js

@@ -1,13 +1,13 @@
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
-import { useStore as v } from "@nanostores/react";
-import { SDKContainer as x, SDKScrollContainer as A } from "./styles.js";
-import { useSdkFeature as D } from "../useSdkFeature.js";
-import { useSdkResponsive as F } from "../useSdkResponsive.js";
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { cx as v } from "@linaria/core";
+import { useStore as N } from "@nanostores/react";
+import { SDKContainer as A, SDKScrollContainer as F } from "./styles.js";
+import { useSdkFeature as x } from "../useSdkFeature.js";
+import { useSdkResponsive as D } from "../useSdkResponsive.js";
 import { useSdkScroll as L } from "../useSdkScroll.js";
-import { useAnalyticsListener as c, newTabLinkListener as g, appScrollListener as C, appClickListener as b } from "../../hooks/analytics.js";
-import { useRef as f, useMemo as y, useEffect as K } from "react";
-import { resetCss as m } from "../../ui/theme/theme.js";
+import { useAnalyticsListener as u, newTabLinkListener as g, appScrollListener as C, appClickListener as b } from "../../hooks/analytics.js";
+import { useRef as p, useMemo as y, useEffect as K } from "react";
+import { resetCss as c } from "../../ui/theme/theme.js";
 import { ActiveFeature as j, StandaloneFeature as R } from "./Features/index.js";
 import { SDKNavigation as w, SDKHeader as E } from "./Navigation/index.js";
 import { SDKNotifications as k } from "./Notifications/index.js";
@@ -21,7 +21,7 @@ const M = ({
   scrollNode: s,
   responsiveStore: t
 }) => {
-  const [, a] = D(e);
+  const [, a] = x(e);
   return /* @__PURE__ */ l(j, {
     className: n,
     scrollNode: s,
@@ -37,7 +37,7 @@ const M = ({
   appNode: r,
   responsiveStore: i
 }) => {
-  const s = v(e.featuresList.getStore());
+  const s = N(e.featuresList.getStore());
   return s ? Array.from(s, (t) => {
     const a = e.getFeature(t);
     return a ? /* @__PURE__ */ l(R, {
@@ -52,21 +52,21 @@ const M = ({
   sdk: e,
   topNavigation: n
 }) => {
-  const r = f(null), i = f(null), [s] = F(r), [t, a] = L(r, s), {
-    sdkReady: p,
-    activeFeature: d,
+  const r = p(null), i = p(null), [s] = D(r), [t, a] = L(r, s), {
+    sdkReady: d,
+    activeFeature: m,
     isLogged: S
-  } = H(e), o = !!p;
-  c(r, {
+  } = H(e), o = !!d;
+  u(r, {
     enabled: o,
     event: "click",
     listener: g
-  }), c(t, {
+  }), u(t, {
     enabled: o,
     event: "scrollend",
     listener: C,
     useDomNode: !0
-  }), c(t, {
+  }), u(t, {
     enabled: o,
     event: "click",
     listener: b,
@@ -80,39 +80,40 @@ const M = ({
     import("./Features/Gamification/gamification-feature.js");
   }, []), /* @__PURE__ */ l(I.Provider, {
     value: h,
-    children: /* @__PURE__ */ u(x, {
+    children: /* @__PURE__ */ f(A, {
       ref: r,
       className: n ? "" : "c10llmat",
       children: [o && n && /* @__PURE__ */ l(w, {
-        className: m,
+        className: c,
         sdk: e,
         ref: i
-      }), o && !n && !!d && /* @__PURE__ */ l(E, {
-        className: N(m, "sl-hide-on-modal"),
+      }), o && !n && !!m && /* @__PURE__ */ l(E, {
+        className: v(c, "sl-hide-on-modal"),
         sdk: e,
         ref: i
-      }), /* @__PURE__ */ u(A, {
+      }), /* @__PURE__ */ f(F, {
         className: "sl-hide-on-modal",
         ref: t,
-        "data-nav": o.toString(),
+        "data-nav": (!!m && o).toString(),
         children: [o && /* @__PURE__ */ l(k, {
           sdk: e,
           scrollNode: t,
           headerNode: i,
           appNode: r,
           scrollStore: a,
-          responsiveStore: s
+          responsiveStore: s,
+          hasActiveFeature: !!m
         }), o && /* @__PURE__ */ l(M, {
           scrollStore: a,
           responsiveStore: s,
           scrollNode: t,
           appNode: r,
-          className: m,
+          className: c,
           sdk: e
         }), o && /* @__PURE__ */ l(P, {
           responsiveStore: s,
           appNode: r,
-          className: m,
+          className: c,
           sdk: e
         })]
       }), o && !S && /* @__PURE__ */ l("div", {

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

@@ -1,2 +1,4 @@
 import { DebugProps } from '../../../utils/debug';
-export declare const AppStory: React.FC<DebugProps>;
+export declare const AppStory: React.FC<DebugProps & {
+    darkMode?: boolean;
+}>;