@streamlayer/react 1.3.0 → 1.3.1

package/lib/es/advertisement.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import { useEffect as F, useRef as z, useMemo as W } from "react";
-import { a as A, s as n, c as H, Q as K, e as g, u as I, L as Q } from "./provider.js";
+import { a as g, s as n, c as H, Q as K, e as A, u as I, L as Q } from "./provider.js";
 import { F as J, u as V, d as X } from "./index2.js";
 import { P as u, a as h, S as Y } from "./useStreamLayerApp2.js";
 const Z = /* @__PURE__ */ n("div")({
@@ -17,7 +17,7 @@ const Z = /* @__PURE__ */ n("div")({
   onAnimationEnd: l
 }) => /* @__PURE__ */ o(Z, {
   style: s,
-  className: A(r, ee, re(i), a && !t && te(i), a && t && ie(i)),
+  className: g(r, ee, re(i), a && !t && te(i), a && t && ie(i)),
   onAnimationEnd: l,
   children: e
 }), le = /* @__PURE__ */ n("a")({
@@ -38,10 +38,12 @@ const Z = /* @__PURE__ */ n("div")({
   propsAsIs: !1
 }), ue = ({ promotion: e, promotionId: s, hiding: r, direction: a = "bottom" }) => {
   var t;
-  return (t = e.additionalBanner) != null && t.imageUrl ? /* @__PURE__ */ o(q, { direction: a, hiding: r, children: /* @__PURE__ */ o(de, { children: /* @__PURE__ */ o(
+  return (t = e.additionalBanner) != null && t.imageUrl ? /* @__PURE__ */ o(q, { direction: a, hiding: r, children: /* @__PURE__ */ o(de, { className: "BannerContainer", children: /* @__PURE__ */ o(
     pe,
     {
+      className: "BannerLink",
       href: e.additionalBanner.url,
+      style: { backgroundImage: `url(${e.additionalBanner.imageUrl})` },
       "data-promo-id": s,
       "data-promo-type": e.type,
       "data-analytics": "banner",
@@ -65,11 +67,11 @@ const Z = /* @__PURE__ */ n("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), Ae = "h10toh7", U = /* @__PURE__ */ n("img")({
+}), ge = "h10toh7", D = /* @__PURE__ */ n("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), ge = /* @__PURE__ */ n("div")({
+}), Ae = /* @__PURE__ */ n("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
@@ -81,7 +83,7 @@ const Z = /* @__PURE__ */ n("div")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), $e = "s1nmch9k", D = /* @__PURE__ */ n("div")({
+}), $e = "s1nmch9k", R = /* @__PURE__ */ n("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
@@ -97,19 +99,19 @@ const Z = /* @__PURE__ */ n("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), Me = /* @__PURE__ */ n("div")({
+}), Ne = /* @__PURE__ */ n("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), Ne = /* @__PURE__ */ n("span")({
+}), Be = /* @__PURE__ */ n("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), Be = /* @__PURE__ */ n("div")({
+}), Me = /* @__PURE__ */ n("div")({
   name: "CloseIconWrap",
   class: "c8d4xfk",
   propsAsIs: !1
-}), Ee = () => H, Te = /* @__PURE__ */ n(Ee())({
+}), Te = () => H, Ee = /* @__PURE__ */ n(Te())({
   name: "CloseIcon",
   class: "ct6oobh",
   propsAsIs: !0
@@ -126,12 +128,12 @@ const Z = /* @__PURE__ */ n("div")({
   class: "t3vxzaw",
   propsAsIs: !1
 }), je = "h10f3u0j", G = ({ promotion: e, promotionId: s, onClose: r }) => {
-  var a, t, i, l, p, m, c, v, f, $, k, S, C, M, N, B, E, T, L, x, _, j, P, O, w, R;
+  var a, t, i, l, p, m, c, v, f, $, k, S, C, N, B, M, T, E, L, x, _, j, P, O, U, w;
   const y = e.type === u.INGAME_IAB11_LBAR || e.type === u.INGAME_IAB11, b = ((a = e.sponsor) == null ? void 0 : a.logo) && e.logoMode === h.CENTER;
   return /* @__PURE__ */ d(he, { className: "PromoOverlay", children: [
     /* @__PURE__ */ d(ye, { children: [
-      /* @__PURE__ */ d(be, { className: A(!b && Ae), children: [
-        ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(U, { src: (i = e.sponsor) == null ? void 0 : i.logo, alt: "promo" }),
+      /* @__PURE__ */ d(be, { className: g(!b && ge), children: [
+        ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(D, { src: (i = e.sponsor) == null ? void 0 : i.logo, alt: "promo" }),
         /* @__PURE__ */ d(
           Se,
           {
@@ -139,27 +141,27 @@ const Z = /* @__PURE__ */ n("div")({
               paddingLeft: (l = e.sponsor) != null && l.logo && e.logoMode === h.LEFT ? "0px" : "8px"
             },
             children: [
-              ((p = e.sponsor) == null ? void 0 : p.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(ge, { children: (m = e.sponsor) == null ? void 0 : m.name }),
-              /* @__PURE__ */ d(Ce, { children: [
-                /* @__PURE__ */ o(Me, { children: "AD" }),
-                /* @__PURE__ */ o(Ne, { children: "SPONSORED" })
+              ((p = e.sponsor) == null ? void 0 : p.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(Ae, { children: (m = e.sponsor) == null ? void 0 : m.name }),
+              /* @__PURE__ */ d(Ce, { className: "SponsorText", children: [
+                /* @__PURE__ */ o(Ne, { children: "AD" }),
+                /* @__PURE__ */ o(Be, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ o(Be, { onClick: r, children: /* @__PURE__ */ o(Te, { name: "icon-cross" }) })
+      /* @__PURE__ */ o(Me, { className: "ClosePromoIcon", onClick: r, children: /* @__PURE__ */ o(Ee, { name: "icon-cross" }) })
     ] }),
     /* @__PURE__ */ d(Ie, { children: [
-      b && /* @__PURE__ */ o(U, { className: $e, src: (c = e.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
-      /* @__PURE__ */ o(D, { children: (f = (v = e.banner) == null ? void 0 : v.video) != null && f.url ? /* @__PURE__ */ o(
+      b && /* @__PURE__ */ o(D, { className: $e, src: (c = e.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
+      /* @__PURE__ */ o(R, { children: (f = (v = e.banner) == null ? void 0 : v.video) != null && f.url ? /* @__PURE__ */ o(
         K,
         {
           source: (k = ($ = e.banner) == null ? void 0 : $.video) == null ? void 0 : k.url,
           poster: (C = (S = e.banner) == null ? void 0 : S.video) == null ? void 0 : C.thumbnailUrl,
           aspectRatio: y ? "1/1" : "16/9",
           onPlay: () => {
-            g.emit("advertisement", {
+            A.emit("advertisement", {
               action: "videoPlay",
               payload: {
                 advertisementId: s,
@@ -168,10 +170,10 @@ const Z = /* @__PURE__ */ n("div")({
             });
           }
         }
-      ) : (M = e.banner) != null && M.imageUrl ? /* @__PURE__ */ o(fe, { style: y ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
-      !y && /* @__PURE__ */ d(D, { children: [
-        ((B = e.banner) == null ? void 0 : B.title) && /* @__PURE__ */ o(_e, { className: A(b && je), children: (E = e.banner) == null ? void 0 : E.title }),
-        ((T = e.banner) == null ? void 0 : T.body) && /* @__PURE__ */ o(ke, { children: (L = e.banner) == null ? void 0 : L.body })
+      ) : (N = e.banner) != null && N.imageUrl ? /* @__PURE__ */ o(fe, { style: y ? { aspectRatio: "1/1" } : {}, src: (B = e.banner) == null ? void 0 : B.imageUrl, alt: "promo" }) : null }),
+      !y && /* @__PURE__ */ d(R, { children: [
+        ((M = e.banner) == null ? void 0 : M.title) && /* @__PURE__ */ o(_e, { className: g("AdvTitle", b && je), children: (T = e.banner) == null ? void 0 : T.title }),
+        ((E = e.banner) == null ? void 0 : E.body) && /* @__PURE__ */ o(ke, { className: "AdvDescription", children: (L = e.banner) == null ? void 0 : L.body })
       ] })
     ] }),
     /* @__PURE__ */ o(Le, { children: /* @__PURE__ */ o(
@@ -186,7 +188,7 @@ const Z = /* @__PURE__ */ n("div")({
         "data-promo-id": s,
         "data-promo-type": e.type,
         target: "_blank",
-        children: (R = (w = e.banner) == null ? void 0 : w.ctaButton) == null ? void 0 : R.label
+        children: (w = (U = e.banner) == null ? void 0 : U.ctaButton) == null ? void 0 : w.label
       }
     ) })
   ] });
@@ -208,16 +210,16 @@ const Z = /* @__PURE__ */ n("div")({
   children: /* @__PURE__ */ o(Pe, {
     children: e
   })
-}), we = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11_LBAR || (e == null ? void 0 : e.type) === u.INGAME_IAB21_LBAR, Re = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11 || (e == null ? void 0 : e.type) === u.INGAME_IAB21, Ue = ({ advertisement: e, skipTypeCheck: s, layoutMode: r = "side-by-side", sidebar: a, banner: t }) => {
+}), Ue = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11_LBAR || (e == null ? void 0 : e.type) === u.INGAME_IAB21_LBAR, we = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11 || (e == null ? void 0 : e.type) === u.INGAME_IAB21, De = ({ advertisement: e, skipTypeCheck: s, layoutMode: r = "side-by-side", sidebar: a, banner: t }) => {
   const i = I(e.data);
   return !i.data && i.loading ? null : i.error ? /* @__PURE__ */ d("div", { children: [
     "error ",
     /* @__PURE__ */ o("button", { onClick: e.close, children: "close" })
-  ] }) : i.data ? !a && !t && (s || Re(i.data)) ? /* @__PURE__ */ o(ve, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : a && (s || we(i.data)) ? /* @__PURE__ */ o(Oe, { className: "PromoSidebarContainer", direction: a, hiding: e.hiding, children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : t ? /* @__PURE__ */ o(ue, { promotionId: e.id, hiding: e.hiding, promotion: i.data, direction: t }) : null : /* @__PURE__ */ d("div", { children: [
+  ] }) : i.data ? !a && !t && (s || we(i.data)) ? /* @__PURE__ */ o(ve, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : a && (s || Ue(i.data)) ? /* @__PURE__ */ o(Oe, { className: "PromoSidebarContainer", direction: a, hiding: e.hiding, children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : t ? /* @__PURE__ */ o(ue, { promotionId: e.id, hiding: e.hiding, promotion: i.data, direction: t }) : null : /* @__PURE__ */ d("div", { children: [
     "empty promo ",
     /* @__PURE__ */ o("button", { onClick: e.close, children: "close" })
   ] });
-}, De = /* @__PURE__ */ n("div")({
+}, Re = /* @__PURE__ */ n("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
@@ -225,13 +227,13 @@ const Z = /* @__PURE__ */ n("div")({
   const s = e.target;
   if (s instanceof HTMLAnchorElement && s.target === "_blank") {
     const r = s.getAttribute("data-promo-id") || "", a = s.getAttribute("data-promo-type") || u.UNSET;
-    s.getAttribute("data-analytics") === "button" && g.emit("advertisement", {
+    s.getAttribute("data-analytics") === "button" && A.emit("advertisement", {
       action: "buttonSelect",
       payload: {
         advertisementId: r,
         advertisementType: a
       }
-    }), s.getAttribute("data-analytics") === "banner" && g.emit("advertisement", {
+    }), s.getAttribute("data-analytics") === "banner" && A.emit("advertisement", {
       action: "bannerSelect",
       payload: {
         advertisementId: r,
@@ -258,13 +260,13 @@ const Z = /* @__PURE__ */ n("div")({
     enabled: !!c,
     event: "click",
     listener: Ge
-  }), c ? /* @__PURE__ */ o(De, {
+  }), c ? /* @__PURE__ */ o(Re, {
     ref: p,
     style: {
       height: !t && !a ? "auto" : "100%"
     },
     className: i ? "mobile-view" : "",
-    children: /* @__PURE__ */ o(Ue, {
+    children: /* @__PURE__ */ o(De, {
       skipTypeCheck: r,
       sidebar: a,
       banner: t,