@streamlayer/react 1.14.3 → 1.14.4

package/lib/es/notification.js

@@ -1,12 +1,12 @@
-import { k as u, s, Z as L, _ as R, $ as B, C as O, a0 as P, Q, d as U, a as V, e as F, N as k, u as W, b as _, T as G, h as K } from "./provider.js";
-import { k as m, Q as A, l as Y, S as Z } from "./useStreamLayerApp2.js";
+import { k as u, s, $ as L, a0 as O, a1 as R, C as B, a2 as P, U as Q, d as U, a as V, e as F, N as k, u as W, b as G, V as K, h as Y } from "./provider.js";
+import { k as m, Q as A, l as _, S as H } from "./useStreamLayerApp2.js";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useState as y, useCallback as H, useMemo as E, useEffect as x } from "react";
+import { useState as y, useCallback as J, useMemo as E, useEffect as x } from "react";
 const $ = /* @__PURE__ */ s("div")({
   name: "Media",
   class: "m1bcvojl",
   propsAsIs: !1
-}), J = () => $, X = /* @__PURE__ */ s(J())({
+}), X = () => $, Z = /* @__PURE__ */ s(X())({
   name: "MediaImgBottom",
   class: "m58gin0",
   propsAsIs: !0
@@ -35,7 +35,7 @@ const $ = /* @__PURE__ */ s("div")({
   [m.NONE]: C,
   [m.ROUNDED]: ne,
   [m.CENTERED]: oe,
-  [m.TRANSPARENT]: X
+  [m.TRANSPARENT]: Z
 }, N = ({
   src: t,
   imageMode: o = m.UNSET,
@@ -109,22 +109,22 @@ const $ = /* @__PURE__ */ s("div")({
         createdTweet: o == null ? void 0 : o.date
       }
     ),
-    /* @__PURE__ */ e(Ae, { children: R(n) })
+    /* @__PURE__ */ e(Ae, { children: O(n) })
   ] });
 }, fe = ({ title: t, questionType: o, questionTypeData: i }) => /* @__PURE__ */ c(M, { children: [
   /* @__PURE__ */ e(
-    B,
+    R,
     {
       questionTypeData: i,
       questionType: o,
-      questionStatus: Y.UNSET
+      questionStatus: _.UNSET
     }
   ),
   t && /* @__PURE__ */ e(pe, { children: t })
 ] }), ge = ({ tweet: t }) => t ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(ye, { ...t, controlVideo: () => {
 } }) }) : null, Te = ({ action: t, questionType: o, inApp: i, insight: a, tweet: n }) => {
   var d;
-  const l = O[o], r = P[o];
+  const l = B[o], r = P[o];
   if (!l || !i || !i.notification)
     return null;
   const { title: p, image: I, imageMode: v } = i.notification;
@@ -154,11 +154,11 @@ const $ = /* @__PURE__ */ s("div")({
   name: "TitleIcon",
   class: "t16zzzei",
   propsAsIs: !0
-}), we = () => Q, Se = /* @__PURE__ */ s(we())({
+}), we = () => Q, qe = /* @__PURE__ */ s(we())({
   name: "Close",
   class: "c1sur0q2",
   propsAsIs: !0
-}), qe = /* @__PURE__ */ s("div")({
+}), Se = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "bai9j52",
   propsAsIs: !1
@@ -197,7 +197,7 @@ const $ = /* @__PURE__ */ s("div")({
             }
           )
         ] }),
-        /* @__PURE__ */ c(qe, { children: [
+        /* @__PURE__ */ c(Se, { children: [
           /* @__PURE__ */ c(Ee, { children: [
             /* @__PURE__ */ e(be, { name: "icon-trophy-solid" }),
             (a = i == null ? void 0 : i.titleCard) == null ? void 0 : a.title
@@ -208,7 +208,7 @@ const $ = /* @__PURE__ */ s("div")({
           ] })
         ] }),
         /* @__PURE__ */ e(
-          Se,
+          qe,
           {
             close: (d) => {
               d == null || d.stopPropagation(), o == null || o();
@@ -226,11 +226,11 @@ const $ = /* @__PURE__ */ s("div")({
   name: "CheckIcon",
   class: "c1mo15kk",
   propsAsIs: !0
-}), Re = () => u, Be = /* @__PURE__ */ s(Re())({
+}), Oe = () => u, Re = /* @__PURE__ */ s(Oe())({
   name: "PredictionIcon",
   class: "p16zkqnm",
   propsAsIs: !0
-}), Oe = /* @__PURE__ */ s("div")({
+}), Be = /* @__PURE__ */ s("div")({
   name: "PredictionIconContainer",
   class: "pjszi7a",
   propsAsIs: !1
@@ -253,16 +253,18 @@ const $ = /* @__PURE__ */ s("div")({
   state: a = "pending"
 }) => {
   const [n, d] = y(0), [l] = y(() => new ResizeObserver((p) => {
-    var I, v;
-    d((v = (I = p == null ? void 0 : p[0]) == null ? void 0 : I.contentRect) == null ? void 0 : v.width);
-  })), r = H((p) => {
+    window.requestAnimationFrame(() => {
+      var I, v;
+      d((v = (I = p == null ? void 0 : p[0]) == null ? void 0 : I.contentRect) == null ? void 0 : v.width);
+    });
+  })), r = J((p) => {
     p || l.disconnect(), l.observe(p);
   }, [l]);
   return E(() => () => {
     l.disconnect();
   }, [l]), /* @__PURE__ */ c(ze, {
-    children: [/* @__PURE__ */ e(Oe, {
-      children: /* @__PURE__ */ e(Be, {
+    children: [/* @__PURE__ */ e(Be, {
+      children: /* @__PURE__ */ e(Re, {
         name: "icon-prediction"
       })
     }), /* @__PURE__ */ e(Pe, {
@@ -290,35 +292,35 @@ const $ = /* @__PURE__ */ s("div")({
   name: "Line",
   class: "l16t1zr7",
   propsAsIs: !1
-}), We = () => g, _e = /* @__PURE__ */ s(We())({
+}), We = () => g, Ge = /* @__PURE__ */ s(We())({
   name: "Line1",
   class: "le78kvg",
   propsAsIs: !0
-}), Ge = () => g, Ke = /* @__PURE__ */ s(Ge())({
+}), Ke = () => g, Ye = /* @__PURE__ */ s(Ke())({
   name: "Line2",
   class: "l1o7966d",
   propsAsIs: !0
-}), Ye = () => g, Ze = /* @__PURE__ */ s(Ye())({
+}), _e = () => g, He = /* @__PURE__ */ s(_e())({
   name: "Line3",
   class: "lu9lyxq",
   propsAsIs: !0
-}), He = () => /* @__PURE__ */ c(Fe, {
-  children: [/* @__PURE__ */ e(_e, {
+}), Je = () => /* @__PURE__ */ c(Fe, {
+  children: [/* @__PURE__ */ e(Ge, {
     children: /* @__PURE__ */ e("div", {})
-  }), /* @__PURE__ */ e(Ke, {
+  }), /* @__PURE__ */ e(Ye, {
     children: /* @__PURE__ */ e("div", {})
-  }), /* @__PURE__ */ e(Ze, {
+  }), /* @__PURE__ */ e(He, {
     children: /* @__PURE__ */ e("div", {})
   })]
-}), Je = /* @__PURE__ */ s("div")({
+}), Xe = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c10jy6zf",
   propsAsIs: !1
-}), Xe = () => u, es = /* @__PURE__ */ s(Xe())({
+}), Ze = () => u, es = /* @__PURE__ */ s(Ze())({
   name: "CheckIcon",
   class: "c1c7scay",
   propsAsIs: !0
-}), ss = () => /* @__PURE__ */ c(Je, {
+}), ss = () => /* @__PURE__ */ c(Xe, {
   children: [/* @__PURE__ */ e(es, {
     name: "icon-check"
   }), " Prediction results are in!"]
@@ -401,11 +403,11 @@ const $ = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cq3agu2",
   propsAsIs: !1
-}), S = /* @__PURE__ */ s("div")({
+}), q = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "b16qj0do",
   propsAsIs: !1
-}), q = {
+}), S = {
   1: 3e3,
   2: 4e3,
   3: 4e3,
@@ -414,8 +416,8 @@ const $ = /* @__PURE__ */ s("div")({
   if (x(() => {
     if (i) {
       const I = setTimeout(() => {
-        q[r + 1] && (n || r < 3) ? i(r + 1) : t == null || t();
-      }, q[r]);
+        S[r + 1] && (n || r < 3) ? i(r + 1) : t == null || t();
+      }, S[r]);
       return () => {
         I && clearTimeout(I);
       };
@@ -423,10 +425,10 @@ const $ = /* @__PURE__ */ s("div")({
     return () => {
     };
   }, [i, r, t, n]), r === 1)
-    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(ss, {}) }) });
+    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(ss, {}) }) });
   let p = "pending";
-  return (r === 3 || r === 4) && (p = n ? "correct" : "incorrect"), /* @__PURE__ */ e(w, { onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(S, { children: [
-    r !== 1 && /* @__PURE__ */ e(He, {}, r),
+  return (r === 3 || r === 4) && (p = n ? "correct" : "incorrect"), /* @__PURE__ */ e(w, { onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(q, { children: [
+    r !== 1 && /* @__PURE__ */ e(Je, {}, r),
     /* @__PURE__ */ c(Ve, { state: p, step: r, answer: (a == null ? void 0 : a.title) || "unknown", children: [
       r === 2 && /* @__PURE__ */ e(is, { title: l || "unknown" }),
       r === 3 && n && /* @__PURE__ */ e(ls, {}),
@@ -455,7 +457,7 @@ const $ = /* @__PURE__ */ s("div")({
   class: "n1i4h28u",
   propsAsIs: !1
 }), ys = (t) => /* @__PURE__ */ e($s, { children: /* @__PURE__ */ e(As, { ...t }) }), fs = ({ sdk: t }) => {
-  const [o] = y(t.getNotificationsStore()), i = V(o), a = t.getFeature(Z.GAMES), n = E(() => t.getActiveNotification(), [t, i]);
+  const [o] = y(t.getNotificationsStore()), i = V(o), a = t.getFeature(H.GAMES), n = E(() => t.getActiveNotification(), [t, i]);
   return x(() => {
     n && F.emit("notification", {
       action: "rendered",
@@ -473,8 +475,8 @@ const $ = /* @__PURE__ */ s("div")({
     }
   ) : null : n && n.type === k.ONBOARDING ? n.data.onboarding ? /* @__PURE__ */ e(je, { open: a == null ? void 0 : a.openFeature, close: n.close, ...n.data.onboarding }) : null : n && /* @__PURE__ */ e(Te, { ...n.data, action: n.action });
 }, Ns = ({ theme: t }) => {
-  const o = W(), i = _(), a = G();
-  return o && (a.appNotification || a.onboardingNotification) ? a.app && !a.onboardingNotification ? null : /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(K, { customTheme: t ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ e(fs, { sdk: o }) }) }) : null;
+  const o = W(), i = G(), a = K();
+  return o && (a.appNotification || a.onboardingNotification) ? a.app && !a.onboardingNotification ? null : /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(Y, { customTheme: t ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ e(fs, { sdk: o }) }) }) : null;
 };
 export {
   Ns as StreamLayerSDKNotification,