@streamlayer/react 1.1.0 → 1.1.2

package/lib/es/advertisement.js

@@ -0,0 +1,302 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useEffect as R, useRef as w, useMemo as D } from "react";
+import { a as U, s as l, c as q, K as F, u as v, L as K, e as O } from "./index2.js";
+import { F as z, u as H, i as W } from "./app.js";
+import { P as c, a as m, S as J } from "./useStreamLayerApp2.js";
+const Q = /* @__PURE__ */ l("div")({
+  name: "Container",
+  class: "c5b6wdg",
+  propsAsIs: !1
+}), V = "a1rlj479", X = "s35f1di", Y = "sj4471g", Z = "b12050d8", oo = "b1d5ybek", no = (o) => o === "left" || o === "right" ? X : Z, eo = (o) => o === "left" || o === "right" ? Y : oo, so = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", G = ({
+  children: o,
+  style: a,
+  className: i,
+  enabled: e = !0,
+  hiding: s,
+  direction: r = "left",
+  onAnimationEnd: t
+}) => /* @__PURE__ */ n(Q, {
+  style: a,
+  className: U(i, V, so(r), e && !s && no(r), e && s && eo(r)),
+  onAnimationEnd: t,
+  children: o
+}), lo = /* @__PURE__ */ l("div")({
+  name: "BannerContainer",
+  class: "bipmch2",
+  propsAsIs: !1
+}), ao = /* @__PURE__ */ l("img")({
+  name: "BannerImg",
+  class: "bpkcihp",
+  propsAsIs: !1
+}), io = ({
+  promotion: o,
+  hiding: a,
+  direction: i = "bottom"
+}) => {
+  var e;
+  return (e = o.additionalBanner) != null && e.imageUrl ? /* @__PURE__ */ n(G, {
+    direction: i,
+    hiding: a,
+    children: /* @__PURE__ */ n(lo, {
+      children: /* @__PURE__ */ n(ao, {
+        src: o.additionalBanner.imageUrl,
+        alt: "promo"
+      })
+    })
+  }) : null;
+}, ro = /* @__PURE__ */ l("div")({
+  name: "Header",
+  class: "hkzhq2w",
+  propsAsIs: !1
+}), to = /* @__PURE__ */ l("div")({
+  name: "HeaderContent",
+  class: "hmgz5i",
+  propsAsIs: !1
+}), j = /* @__PURE__ */ l("img")({
+  name: "SponsorLogo",
+  class: "syxi3jt",
+  propsAsIs: !1
+}), co = /* @__PURE__ */ l("div")({
+  name: "SponsorName",
+  class: "s149e3gp",
+  propsAsIs: !1
+}), po = /* @__PURE__ */ l("div")({
+  name: "PromoOverlay",
+  class: "p10toh7",
+  propsAsIs: !1
+}), mo = /* @__PURE__ */ l("div")({
+  name: "Media",
+  class: "m1jyea6t",
+  propsAsIs: !1
+}), uo = /* @__PURE__ */ l("div")({
+  name: "Text",
+  class: "tzpfa3h",
+  propsAsIs: !1
+}), vo = /* @__PURE__ */ l("div")({
+  name: "Description",
+  class: "d1crmu01",
+  propsAsIs: !1
+}), ho = /* @__PURE__ */ l("div")({
+  name: "SponsorText",
+  class: "s1l37r8s",
+  propsAsIs: !1
+}), go = /* @__PURE__ */ l("div")({
+  name: "ADLogo",
+  class: "a1nmch9k",
+  propsAsIs: !1
+}), bo = /* @__PURE__ */ l("span")({
+  name: "SponsoredText",
+  class: "s1er0ljd",
+  propsAsIs: !1
+}), Ao = /* @__PURE__ */ l("div")({
+  name: "CloseIconWrap",
+  class: "cydopmr",
+  propsAsIs: !1
+}), yo = () => q, Io = /* @__PURE__ */ l(yo())({
+  name: "CloseIcon",
+  class: "c1w6nt04",
+  propsAsIs: !0
+}), fo = /* @__PURE__ */ l("div")({
+  name: "Content",
+  class: "c1evcmtq",
+  propsAsIs: !1
+}), $o = /* @__PURE__ */ l("div")({
+  name: "ActionBtnWrap",
+  class: "awodx0x",
+  propsAsIs: !1
+}), Mo = /* @__PURE__ */ l("a")({
+  name: "ActionButton",
+  class: "a1q3n6oi",
+  propsAsIs: !1
+}), So = /* @__PURE__ */ l("img")({
+  name: "PromoImg",
+  class: "p8d4xfk",
+  propsAsIs: !1
+}), ko = /* @__PURE__ */ l("div")({
+  name: "Title",
+  class: "tt6oobh",
+  propsAsIs: !1
+}), P = ({
+  promotion: o,
+  onClose: a,
+  inSidebar: i
+}) => {
+  var e, s, r, t, p, h, g, b, A, y, I, f, $, M, S, k, B, C, E, x, L, N, T, _;
+  const u = o.type === c.INGAME_IAB11_LBAR || o.type === c.INGAME_IAB11;
+  return /* @__PURE__ */ d(po, { className: "PromoOverlay", style: { ...i ? {} : { backgroundColor: "#1E3344" } }, children: [
+    /* @__PURE__ */ d(ro, { children: [
+      /* @__PURE__ */ d(to, { children: [
+        ((e = o.sponsor) == null ? void 0 : e.logo) && o.logoMode === m.LEFT && /* @__PURE__ */ n(j, { src: (s = o.sponsor) == null ? void 0 : s.logo, alt: "promo" }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            style: {
+              paddingLeft: (r = o.sponsor) != null && r.logo && o.logoMode === m.LEFT ? "0px" : "8px"
+            },
+            children: [
+              ((t = o.sponsor) == null ? void 0 : t.logo) && o.logoMode === m.LEFT && /* @__PURE__ */ n(co, { children: (p = o.sponsor) == null ? void 0 : p.name }),
+              /* @__PURE__ */ d(ho, { children: [
+                /* @__PURE__ */ n(go, { children: "AD" }),
+                /* @__PURE__ */ n(bo, { children: "SPONSORED" })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(Ao, { onClick: a, children: /* @__PURE__ */ n(Io, { name: "icon-cross" }) })
+    ] }),
+    /* @__PURE__ */ d(mo, { children: [
+      ((h = o.sponsor) == null ? void 0 : h.logo) && o.logoMode === m.CENTER && /* @__PURE__ */ n(j, { src: (g = o.sponsor) == null ? void 0 : g.logo, alt: "promo" }),
+      /* @__PURE__ */ d(fo, { children: [
+        (A = (b = o.banner) == null ? void 0 : b.video) != null && A.url ? /* @__PURE__ */ n(
+          F,
+          {
+            source: (I = (y = o.banner) == null ? void 0 : y.video) == null ? void 0 : I.url,
+            poster: ($ = (f = o.banner) == null ? void 0 : f.video) == null ? void 0 : $.thumbnailUrl,
+            aspectRatio: u ? "1/1" : "16/9"
+          }
+        ) : (M = o.banner) != null && M.imageUrl ? /* @__PURE__ */ n(
+          So,
+          {
+            style: u ? { width: "268px", height: "268px" } : {},
+            src: (S = o.banner) == null ? void 0 : S.imageUrl,
+            alt: "promo"
+          }
+        ) : null,
+        !u && /* @__PURE__ */ d(uo, { children: [
+          /* @__PURE__ */ n(ko, { children: (k = o.banner) == null ? void 0 : k.title }),
+          /* @__PURE__ */ n(vo, { children: (B = o.banner) == null ? void 0 : B.body })
+        ] })
+      ] }),
+      /* @__PURE__ */ n($o, { children: /* @__PURE__ */ n(
+        Mo,
+        {
+          href: (C = o.banner) == null ? void 0 : C.url,
+          style: {
+            backgroundColor: ((x = (E = o.banner) == null ? void 0 : E.ctaButton) == null ? void 0 : x.color) || "#009dc4",
+            color: ((N = (L = o.banner) == null ? void 0 : L.ctaButton) == null ? void 0 : N.textColor) || "#fff"
+          },
+          target: "_blank",
+          children: (_ = (T = o.banner) == null ? void 0 : T.ctaButton) == null ? void 0 : _.label
+        }
+      ) })
+    ] })
+  ] });
+}, Bo = /* @__PURE__ */ l("div")({
+  name: "SidebarContainer",
+  class: "s1abskp8",
+  propsAsIs: !1
+}), Co = ({
+  children: o,
+  direction: a,
+  style: i,
+  className: e,
+  hiding: s
+}) => /* @__PURE__ */ n(G, {
+  direction: a,
+  style: i,
+  hiding: s,
+  className: e,
+  children: /* @__PURE__ */ n(Bo, {
+    children: o
+  })
+}), Eo = (o) => (o == null ? void 0 : o.type) === c.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === c.INGAME_IAB21_LBAR, xo = (o) => (o == null ? void 0 : o.type) === c.INGAME_IAB11 || (o == null ? void 0 : o.type) === c.INGAME_IAB21, Lo = ({ advertisement: o, layoutMode: a = "side-by-side", sidebar: i, banner: e }) => {
+  const s = v(o.data);
+  return !s.data && s.loading ? null : s.error ? /* @__PURE__ */ d("div", { children: [
+    "error ",
+    /* @__PURE__ */ n("button", { onClick: o.close, children: "close" })
+  ] }) : s.data ? !i && !e && xo(s.data) ? /* @__PURE__ */ n(P, { promotion: s.data, onClose: o.close }) : i && Eo(s.data) ? /* @__PURE__ */ n(Co, { direction: i, hiding: o.hiding, children: /* @__PURE__ */ n(P, { promotion: s.data, onClose: o.close, inSidebar: !0 }) }) : e ? /* @__PURE__ */ n(io, { hiding: o.hiding, promotion: s.data, direction: e }) : null : /* @__PURE__ */ d("div", { children: [
+    "empty promo ",
+    /* @__PURE__ */ n("button", { onClick: o.close, children: "close" })
+  ] });
+}, No = /* @__PURE__ */ l("div")({
+  name: "AdvertisementUIWrap",
+  class: "aa6pjif",
+  propsAsIs: !1
+}), To = (o) => {
+  const a = o.target;
+  a instanceof HTMLAnchorElement && a.target === "_blank" && a.getAttribute("data-analytics") === "web-link" && O.emit("poll", {
+    action: "navigated",
+    payload: {}
+  });
+}, _o = ({
+  gamification: o,
+  layoutMode: a,
+  sidebar: i,
+  banner: e
+}) => {
+  const s = w(null), r = v(o.advertisement.$list), t = D(
+    () => o.advertisement.getActiveAdvertisement(),
+    // fire getActiveNotification when notifications were updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [r]
+  );
+  return K(s, {
+    enabled: !!t,
+    event: "click",
+    listener: To
+  }), t ? /* @__PURE__ */ n(No, {
+    ref: s,
+    style: {
+      height: !e && !i ? "auto" : "100%"
+    },
+    children: /* @__PURE__ */ n(Lo, {
+      sidebar: i,
+      banner: e,
+      advertisement: t,
+      layoutMode: a
+    })
+  }) : null;
+}, jo = ({
+  sdk: o,
+  sidebar: a,
+  banner: i,
+  event: e,
+  layoutMode: s
+}) => {
+  const {
+    deactivate: r
+  } = z(o);
+  R(() => {
+    e ? o.createEventSession(e) : r();
+  }, [e, r, o]);
+  const t = v(o.featuresList.getStore());
+  if (a && i)
+    return /* @__PURE__ */ n("div", {
+      style: {
+        color: "red"
+      },
+      children: "define either sidebar or banner, not both."
+    });
+  if (!a && !i && s)
+    return /* @__PURE__ */ n("div", {
+      style: {
+        color: "red"
+      },
+      children: "layoutMode property unavailable for the overlay mode."
+    });
+  if (!t)
+    return null;
+  const p = o.getFeature(J.GAMES);
+  return p ? /* @__PURE__ */ n(_o, {
+    gamification: p,
+    sidebar: a,
+    banner: i,
+    layoutMode: s
+  }) : null;
+}, Uo = ({ event: o, sidebar: a, banner: i }) => {
+  const e = H();
+  return e ? /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(
+    jo,
+    {
+      sdk: e,
+      event: o,
+      sidebar: a,
+      banner: i,
+      layoutMode: "side-by-side"
+    }
+  ) }) }) : null;
+};
+export {
+  Uo as StreamLayerSDKAdvertisement
+};

package/lib/es/app.js

@@ -2,9 +2,9 @@ var ge = Object.defineProperty;
 var me = (e, s, n) => s in e ? ge(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
 var g = (e, s, n) => me(e, typeof s != "symbol" ? s + "" : s, n);
 import { jsx as t, jsxs as m, Fragment as L } from "react/jsx-runtime";
-import { a3 as V, u, F as fe, s as h, T as re, i as ke, x as ye, a as Ne, N as be, k as Se, M as Ie, b as Ee, e as we, C as Ae, f as Ce, O as ae, m as P, l as $e, g as Le, h as De, n as le, j as Te, o as xe, q as Oe, r as M, t as Re, v as de, w as U, y as Ve, z as Pe, I as Q, c as ce, B as Qe, D as _e, E as qe, G as Fe, H as x, J as G, K as Ke, L as Me, P as Ue, Q as ze, U as Be, V as We, W as _, _ as Ge, p as q, $ as He, a0 as je, X as Xe, Y as Ye, Z as Ze, a4 as Je, a1 as pe, a2 as H } from "./index2.js";
+import { a4 as V, u, F as fe, s as h, T as re, i as ke, x as ye, b as Ne, N as be, k as Se, M as Ie, g as Ee, h as Ae, C as we, j as Ce, O as ae, m as P, l as $e, n as Le, o as De, p as le, q as Te, r as xe, t as Oe, v as M, w as Re, y as de, z as U, A as Ve, B as Pe, I as Q, c as ce, E as Qe, G as _e, H as qe, e as Fe, J as x, P as G, Q as Ke, R as Me, U as Ue, a as ze, W as Be, X as We, L as _, $ as Ge, f as q, a0 as He, a1 as je, Y as Xe, Z as Ye, _ as Ze, a5 as Je, a2 as pe, a3 as H } from "./index2.js";
 import { createContext as es, useContext as z, useRef as $, useState as E, useEffect as k, useTransition as ss, lazy as ns, useMemo as C, Suspense as ts, forwardRef as os, useLayoutEffect as is, useCallback as R } from "react";
-import { C as A, c as j, Q as O, S as D } from "./useStreamLayerApp2.js";
+import { C as w, c as j, Q as O, S as D } from "./useStreamLayerApp2.js";
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
 function rs(e) {
   return e instanceof DOMException && // everything except Firefox
@@ -46,7 +46,7 @@ var X;
 (function(e) {
   e.Init = "init", e.Ready = "ready", e.Connecting = "connecting", e.Connected = "connected", e.Disconnected = "disconnected", e.Failed = "failed", e.Reconnect = "reconnect", e.Reconnecting = "reconnecting";
 })(X || (X = {}));
-A.Unknown, A.Internal, A.DeadlineExceeded, A.ResourceExhausted, A.FailedPrecondition, A.Unavailable, A.DataLoss;
+w.Unknown, w.Internal, w.DeadlineExceeded, w.ResourceExhausted, w.FailedPrecondition, w.Unavailable, w.DataLoss;
 V("grpc:retry");
 j(10, { description: "Number of attempts to retry" }), j(3e4, { description: "Max delay between retries in milliseconds" });
 var I;
@@ -226,7 +226,7 @@ const ds = {
   return !i.length && !l ? /* @__PURE__ */ t(ms, {
     deepLink: r
   }) : /* @__PURE__ */ m(L, {
-    children: [/* @__PURE__ */ t(we, {
+    children: [/* @__PURE__ */ t(Ae, {
       items: i,
       scrollNode: s,
       scrollStore: n,
@@ -236,7 +236,7 @@ const ds = {
       currentUserId: e.currentUserId.get()
     }, d), r && /* @__PURE__ */ t(fs, {
       ref: o,
-      children: /* @__PURE__ */ t(Ae, {
+      children: /* @__PURE__ */ t(we, {
         onClick: () => p(r),
         title: "Invite Friends",
         description: "Challenge them now!"
@@ -316,7 +316,7 @@ const ds = {
   className: n,
   gamification: e,
   responsiveStore: a
-}), ws = ({
+}), As = ({
   gamification: e,
   className: s,
   appNode: n,
@@ -360,9 +360,9 @@ const ds = {
     useContainer: !l,
     children: p
   });
-}, As = ns(() => import("./gamification-feature.js")), Cs = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: i, scrollNode: a, responsiveStore: l }) => {
+}, ws = ns(() => import("./gamification-feature.js")), Cs = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: i, scrollNode: a, responsiveStore: l }) => {
   const d = C(() => s && s.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(cs, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
-    As,
+    ws,
     {
       appNode: i,
       scrollStore: o,
@@ -380,7 +380,7 @@ const ds = {
     }
   );
 }, $s = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(
-  ws,
+  As,
   {
     className: s,
     appNode: n,
@@ -526,18 +526,18 @@ const ds = {
 }) => {
   var l, d, r, p, c, v, f;
   const N = u(o.friends.getStore()), [b, S] = E(void 0), y = C(() => {
-    var w, T;
+    var A, T;
     const W = a.getInviter();
-    return W ? (T = (w = N.data) == null ? void 0 : w.find(({
+    return W ? (T = (A = N.data) == null ? void 0 : A.find(({
       slId: ve
     }) => ve === W)) == null ? void 0 : T.name : "";
   }, [N.data, a]);
   return k(() => {
-    const w = e.$store.subscribe((T) => {
+    const A = e.$store.subscribe((T) => {
       T && S(T.data);
     });
     return () => {
-      w();
+      A();
     };
   }, [e.$store]), /* @__PURE__ */ t(Ms, {
     children: /* @__PURE__ */ t(_e, {
@@ -563,8 +563,8 @@ const ds = {
       inviteCardSubtext: (v = s.inviteCard) == null ? void 0 : v.subtext,
       inviteCardBtnLabel: (f = s.inviteCard) == null ? void 0 : f.buttonLabel,
       onClose: () => {
-        var w;
-        (w = n.close) == null || w.call(n);
+        var A;
+        (A = n.close) == null || A.call(n);
       },
       gamification: o,
       sdk: a,
@@ -939,6 +939,7 @@ const ds = {
 };
 export {
   mn as E,
+  rn as F,
   kn as S,
   cn as i,
   fn as u