@streamlayer/react-ui 1.11.4 → 1.12.0

package/lib/ui/advertisement/index.d.ts

@@ -1,4 +1,5 @@
 import { Advertisement } from '@streamlayer/feature-gamification';
+import { ControlVideoCb } from '../video-player';
 export declare const AdvertisementUI: React.FC<{
     advertisement: Exclude<Advertisement['data'], undefined>;
     layoutMode?: 'cover' | 'side-by-side';
@@ -10,4 +11,6 @@ export declare const AdvertisementUI: React.FC<{
     isNotification?: boolean;
     skipTypeCheck?: boolean;
     skipAutoClose?: boolean;
+    externalAd?: Advertisement['externalAd'];
+    controlVideo: ControlVideoCb;
 }>;

package/lib/ui/advertisement/index.js

@@ -1,41 +1,47 @@
 import { jsx as o } from "react/jsx-runtime";
 import { PromotionType as r } from "@streamlayer/sdk-web-types";
-import { Banner as a } from "./banner/index.js";
-import { Notification as d } from "./notification/index.js";
-import { Overlay as c } from "./overlay/index.js";
-import { Sidebar as B } from "./sidebar/index.js";
-import { OverlayContainer as N } from "./overlay/styles.js";
-const _ = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === r.INGAME_IAB21_LBAR, M = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11 || (i == null ? void 0 : i.type) === r.INGAME_IAB21, C = ({
+import { Banner as _ } from "./banner/index.js";
+import { Notification as a } from "./notification/index.js";
+import { Overlay as A } from "./overlay/index.js";
+import { Sidebar as M } from "./sidebar/index.js";
+import { OverlayContainer as d } from "./overlay/styles.js";
+const p = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === r.INGAME_IAB21_LBAR, q = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11 || (i == null ? void 0 : i.type) === r.INGAME_IAB21, P = ({
   advertisement: i,
   close: t,
-  skipTypeCheck: l,
-  skipAutoClose: u,
-  layoutMode: p = "side-by-side",
+  skipTypeCheck: u,
+  skipAutoClose: l,
+  layoutMode: E = "side-by-side",
   sidebar: n,
-  isNotification: y,
+  isNotification: B,
   banner: f,
   markAsViewed: I,
-  open: A
-}) => i.promotion ? y && i.notification ? /* @__PURE__ */ o(d, { open: A, notification: i.notification, promotionId: i.question.id }) : !n && !f && (l || M(i.promotion)) ? /* @__PURE__ */ o(N, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(
-  c,
+  open: N,
+  externalAd: y,
+  controlVideo: c
+}) => i.promotion ? B && i.notification ? /* @__PURE__ */ o(a, { open: N, notification: i.notification, promotionId: i.question.id }) : !n && !f && (u || q(i.promotion)) ? /* @__PURE__ */ o(d, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(
+  A,
   {
     markAsViewed: I,
     promotionId: i.question.id,
     promotion: i.promotion,
     onClose: t,
-    skipAutoClose: u
+    skipAutoClose: l,
+    externalAd: y,
+    controlVideo: c
   }
-) }) : n && (l || _(i.promotion)) ? /* @__PURE__ */ o(B, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ o(
-  c,
+) }) : n && (u || p(i.promotion)) ? /* @__PURE__ */ o(M, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ o(
+  A,
   {
     markAsViewed: I,
     promotionId: i.question.id,
     promotion: i.promotion,
+    externalAd: y,
     onClose: t,
-    skipAutoClose: u
+    controlVideo: c,
+    skipAutoClose: l
   }
 ) }) : f ? /* @__PURE__ */ o(
-  a,
+  _,
   {
     promotionId: i.question.id,
     hiding: !1,
@@ -44,5 +50,5 @@ const _ = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i ==
   }
 ) : null : null;
 export {
-  C as AdvertisementUI
+  P as AdvertisementUI
 };

package/lib/ui/advertisement/mock.d.ts

@@ -1,3 +1,4 @@
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
 export declare const promotionMock: PromotionOptions;
 export declare const promotionMockWithVideo: PromotionOptions;
+export declare const promotionMockWithGAM: PromotionOptions;

package/lib/ui/advertisement/mock.js

@@ -1,7 +1,7 @@
-import { PromotionType as o, PromotionWallet as e, PromotionLogoMode as a, CtaIconMode as c } from "@streamlayer/sdk-web-types";
+import { PromotionType as e, PromotionWallet as o, PromotionLogoMode as a, CtaIconMode as c } from "@streamlayer/sdk-web-types";
 const d = {
-  type: o.INGAME_IAB21_LBAR,
-  enableWallet: e.DISABLED,
+  type: e.INGAME_IAB21_LBAR,
+  enableWallet: o.DISABLED,
   coupon: "",
   logoMode: a.LEFT,
   couponZip: "",
@@ -28,8 +28,41 @@ const d = {
     url: "google.com"
   }
 }, r = {
-  type: o.INGAME_IAB21_LBAR,
-  enableWallet: e.DISABLED,
+  type: e.INGAME_IAB21_LBAR,
+  enableWallet: o.DISABLED,
+  coupon: "",
+  logoMode: a.LEFT,
+  couponZip: "",
+  couponBarcodeUrl: "",
+  sponsor: {
+    logo: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/f1de6799-4502-4423-9cbe-4804cd0ba769/c911da1a-e4a1-4e9a-8eb2-d1a6aa17e05d.png",
+    name: "Lorem ipsum dolor sit 4434, co"
+  },
+  banner: {
+    imageUrl: "",
+    url: "",
+    video: {
+      id: "1",
+      thumbnailUrl: "https://www.figma.com/file/8XscgUSGOMU6rCYDLBgrAc/image/58f7c29647f7ad5bd447f76534af79609bedc74f",
+      url: "https://static-next.streamlayer.io/2e8700993dd42a9b3283ef7f1b4bddc0/aa7a51c8-b8fb-4e8c-97bd-eebf649fd04d/36163fdd-3d41-447c-a3b2-3faf35ae9235.mp4"
+    },
+    ctaButton: {
+      label: "Lorem ipsum dol",
+      color: "#1d7bff",
+      ctaIcon: "",
+      ctaIconMode: c.CTA_ICON_UNSET,
+      textColor: "#fff"
+    },
+    body: "Lorem ipsum dolor sit 4434, consectetur 1111192392 3333, sed do 4434343 342343 545454344 ut 234323 ",
+    title: "Lorem ipsum dolor sit 4434, co"
+  },
+  additionalBanner: {
+    imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/42b6d84a-3cca-4eed-98ed-195706b47882/fce903c3-9781-4613-ae1e-4cce7e8cde90.png",
+    url: "google.com"
+  }
+}, l = {
+  type: e.EXTERNAL_AD,
+  enableWallet: o.DISABLED,
   coupon: "",
   logoMode: a.LEFT,
   couponZip: "",
@@ -63,5 +96,6 @@ const d = {
 };
 export {
   d as promotionMock,
+  l as promotionMockWithGAM,
   r as promotionMockWithVideo
 };

package/lib/ui/advertisement/overlay/externalAd/controls.d.ts

@@ -0,0 +1,5 @@
+export declare const Controls: React.FC<{
+    time: number;
+    adCount: number;
+    adPosition: number;
+}>;

package/lib/ui/advertisement/overlay/externalAd/controls.js

@@ -0,0 +1,33 @@
+import { jsxs as e, Fragment as a, jsx as i } from "react/jsx-runtime";
+import { styled as o } from "@linaria/react";
+const m = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c10m2bce",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ o("div")({
+  name: "Item",
+  class: "ig23yq5",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ o("div")({
+  name: "Dot",
+  class: "d1f6aqua",
+  propsAsIs: !1
+}), h = ({
+  time: t,
+  adCount: n,
+  adPosition: c
+}) => {
+  const r = Math.floor(t / 60), s = t - r * 60;
+  return r === 0 && s === 0 && n === c ? null : /* @__PURE__ */ e(m, {
+    children: [n > 1 && /* @__PURE__ */ e(a, {
+      children: [/* @__PURE__ */ e(l, {
+        children: [c, " of ", n]
+      }), /* @__PURE__ */ i(f, {})]
+    }), /* @__PURE__ */ e(l, {
+      children: [r, ":", s < 10 ? `0${s}` : s]
+    })]
+  });
+};
+export {
+  h as Controls
+};

package/lib/ui/advertisement/overlay/externalAd/index.d.ts

@@ -0,0 +1,2 @@
+import { OverlayProps } from '..';
+export declare const ExternalAdOverlay: React.FC<OverlayProps>;

package/lib/ui/advertisement/overlay/externalAd/index.js

@@ -0,0 +1,121 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { cx as P } from "@linaria/core";
+import { styled as D } from "@linaria/react";
+import { useRef as M, useState as E, useCallback as N, useEffect as H } from "react";
+import { eventBus as w } from "@streamlayer/sdk-web-interfaces";
+import { PromotionLogoMode as q } from "@streamlayer/sdk-web-types";
+import { PromoOverlay as _, Header as b, HeaderContent as I, headerContentShift as W, ADLogo as j, Media as B } from "../styles.js";
+import { CloseButton as C } from "../../../close-btn/index.js";
+import { Controls as G } from "./controls.js";
+const k = (s, i, { onPlay: u, onStop: e, onProgress: a }) => {
+  const r = google.ima;
+  let n = new r.AdDisplayContainer(s), d = new r.AdsLoader(n), c = new r.AdsRequest(), t;
+  d.addEventListener(
+    r.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+    (m) => {
+      t = m.getAdsManager(s), u && t.addEventListener(r.AdEvent.Type.STARTED, u), e && t.addEventListener(r.AdEvent.Type.COMPLETE, e), a && t.addEventListener(r.AdEvent.Type.AD_PROGRESS, (A) => a(A.getAdData())), t.init(s.clientWidth, s.clientHeight, r.ViewMode.NORMAL), t.start();
+    },
+    !1
+  ), d.addEventListener(
+    r.AdErrorEvent.Type.AD_ERROR,
+    () => {
+      console.log("ad error"), e == null || e();
+    },
+    !1
+  ), c.linearAdSlotWidth = s.clientWidth, c.linearAdSlotHeight = s.clientHeight, c.adTagUrl = i, d.requestAds(c);
+  const y = () => {
+    t == null || t.destroy(), d == null || d.destroy(), n == null || n.destroy(), n = void 0, d = void 0, c = void 0, t = void 0;
+  };
+  return () => {
+    try {
+      n.initialize();
+    } catch (m) {
+      e == null || e(), console.log("AdsManager could not be started", m);
+    }
+    return y;
+  };
+}, z = /* @__PURE__ */ D("div")({
+  name: "Container",
+  class: "c4q6dw1",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ D("div")({
+  name: "ControlsContainer",
+  class: "c1la67r",
+  propsAsIs: !1
+}), F = "m3guev", J = "m7099mt", K = "mmm6o5s", te = ({
+  promotion: s,
+  controlVideo: i,
+  promotionId: u,
+  onClose: e,
+  externalAd: a,
+  skipAutoClose: r
+}) => {
+  var T;
+  const n = M(null), [d, c] = E(!1), [t, y] = E(0), [p, m] = E(0), [A, R] = E(0), o = M(), f = N(() => {
+    y(0), m(0), R(0), c(!1), i == null || i({
+      muted: !1
+    });
+  }, [i]);
+  H(() => {
+    if (a != null && a.url && n.current) {
+      f();
+      const L = k(n.current, a.url, {
+        onPlay: () => {
+          w.emit("advertisement", {
+            action: "videoPlay",
+            payload: {
+              id: u,
+              type: s.type
+            }
+          }), i == null || i({
+            muted: !0
+          }), c(!0);
+        },
+        onStop: () => {
+          e == null || e(), f();
+        },
+        onProgress: (v) => {
+          y(Math.round(v.duration - v.currentTime)), m(v.totalAds), R(v.adPosition);
+        }
+      })();
+      return o.current = L, () => {
+        o.current = void 0, L();
+      };
+    }
+  }, [a == null ? void 0 : a.url, i, f, u, s.type, e]);
+  const O = ((T = s.sponsor) == null ? void 0 : T.logo) && s.logoMode === q.CENTER;
+  return /* @__PURE__ */ h(_, {
+    className: "PromoOverlay",
+    children: [/* @__PURE__ */ h(b, {
+      children: [/* @__PURE__ */ l(I, {
+        className: P(!O && W),
+        children: /* @__PURE__ */ l(j, {
+          style: {
+            transform: "scale(1.5)"
+          },
+          children: "Ad"
+        })
+      }), /* @__PURE__ */ h(U, {
+        children: [/* @__PURE__ */ l(G, {
+          time: t,
+          adCount: p,
+          adPosition: A
+        }), r && /* @__PURE__ */ l(C, {
+          className: "ClosePromoIcon",
+          close: () => {
+            var g;
+            (g = o.current) == null || g.call(o), e == null || e(), f();
+          }
+        })]
+      })]
+    }), /* @__PURE__ */ l(B, {
+      className: P(F, d && J, !d && K),
+      children: /* @__PURE__ */ l(z, {
+        ref: n
+      })
+    })]
+  });
+};
+export {
+  te as ExternalAdOverlay
+};

package/lib/ui/advertisement/overlay/index.d.ts

@@ -1,10 +1,15 @@
+import { Advertisement } from '@streamlayer/feature-gamification';
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
+import { ControlVideoCb } from '../../video-player';
 export { OverlayContainer } from './styles';
-export declare const Overlay: React.FC<{
+export type OverlayProps = {
     promotionId: string;
     promotion: PromotionOptions;
     onClose?: () => void;
     markAsViewed?: () => void;
     skipAutoClose?: boolean;
     inSidebar?: boolean;
-}>;
+    externalAd?: Advertisement['externalAd'];
+    controlVideo: ControlVideoCb;
+};
+export declare const Overlay: React.FC<OverlayProps>;

package/lib/ui/advertisement/overlay/index.js

@@ -1,92 +1,101 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cx as I } from "@linaria/core";
-import { useEffect as $ } from "react";
-import { eventBus as k } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as j, PromotionLogoMode as s, AutoPlayVideo as q, PromotionButtonType as z } from "@streamlayer/sdk-web-types";
-import { CloseButton as J } from "../../close-btn/index.js";
-import { VideoPlayer as K } from "../../video-player/index.js";
-import { PromoOverlay as Q, Header as X, HeaderContent as Y, headerContentShift as Z, SponsorLogo as G, Sponsor as w, SponsorName as ee, SponsorText as ae, ADLogo as le, SponsoredText as re, Media as te, shiftMedia as se, Content as H, PromoImg as ne, Title as oe, hideOnMobile as ce, Description as de, ActionBtnWrap as ie, ActionButton as ye } from "./styles.js";
-import { OverlayContainer as xe } from "./styles.js";
-const Pe = ({ promotion: e, skipAutoClose: V, promotionId: t, onClose: W, markAsViewed: n }) => {
-  var d, i, y, u, h, b, f, g, p, T, N, P, B, v, x, A, C, E, m, M, O, L, S, D, R, U, _, F;
-  const o = e.type === j.INGAME_IAB11_LBAR || e.type === j.INGAME_IAB11, c = ((d = e.sponsor) == null ? void 0 : d.logo) && e.logoMode === s.CENTER;
-  $(() => {
-    t && e.type && n && n();
-  }, [t, e.type, n]);
-  let r = (i = e.banner) == null ? void 0 : i.url;
-  return r && r.indexOf("http") !== 0 && (r = `https://${r}`), /* @__PURE__ */ l(Q, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ l(X, { children: [
-      /* @__PURE__ */ l(Y, { className: I(!c && Z), children: [
-        ((y = e.sponsor) == null ? void 0 : y.logo) && e.logoMode === s.LEFT && /* @__PURE__ */ a(G, { src: (u = e.sponsor) == null ? void 0 : u.logo, alt: "promo" }),
-        /* @__PURE__ */ l(
-          w,
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { cx as W } from "@linaria/core";
+import { useState as Z, useEffect as $ } from "react";
+import { eventBus as oo } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as q, PromotionLogoMode as l, AutoPlayVideo as eo, PromotionButtonType as ro } from "@streamlayer/sdk-web-types";
+import { CloseButton as to } from "../../close-btn/index.js";
+import { VideoPlayer as no } from "../../video-player/index.js";
+import { ExternalAdOverlay as ao } from "./externalAd/index.js";
+import { PromoOverlay as lo, Header as io, HeaderContent as so, headerContentShift as mo, SponsorLogo as z, Sponsor as co, SponsorName as po, SponsorText as uo, ADLogo as yo, SponsoredText as fo, Media as bo, shiftMedia as go, Content as J, PromoImg as ho, Title as Po, hideOnMobile as Ao, Description as To, ActionBtnWrap as No, ActionButton as vo } from "./styles.js";
+import { OverlayContainer as _o } from "./styles.js";
+const Do = (c) => {
+  var y, f, b, g, h, P, A, T, N, v, x, B, C, E, O, M, S, L, I, D, R, U, _, k, F, V, j, G, H, w;
+  const { promotion: o, controlVideo: t, skipAutoClose: K, promotionId: a, onClose: Q, markAsViewed: i, externalAd: p } = c, s = o.type === q.INGAME_IAB11_LBAR || o.type === q.INGAME_IAB11, d = ((y = o.sponsor) == null ? void 0 : y.logo) && o.logoMode === l.CENTER, X = !!((b = (f = o.banner) == null ? void 0 : f.video) != null && b.url), m = o.autoPlayVideo === eo.ENABLED, [Y, u] = Z(!X || !m);
+  if ($(() => {
+    a && o.type && i && i();
+  }, [a, o.type, i]), $(() => () => {
+    t == null || t({ muted: !1 });
+  }, [t]), p)
+    return /* @__PURE__ */ e(ao, { ...c, externalAd: p });
+  let n = (g = o.banner) == null ? void 0 : g.url;
+  return n && n.indexOf("http") !== 0 && (n = `https://${n}`), /* @__PURE__ */ r(lo, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ r(io, { children: [
+      /* @__PURE__ */ r(so, { className: W(!d && mo), children: [
+        ((h = o.sponsor) == null ? void 0 : h.logo) && o.logoMode === l.LEFT && /* @__PURE__ */ e(z, { src: (P = o.sponsor) == null ? void 0 : P.logo, alt: "promo" }),
+        /* @__PURE__ */ r(
+          co,
           {
             style: {
-              paddingLeft: (h = e.sponsor) != null && h.logo && e.logoMode === s.LEFT ? "0px" : "8px"
+              paddingLeft: (A = o.sponsor) != null && A.logo && o.logoMode === l.LEFT ? "0px" : "8px"
             },
             children: [
-              ((b = e.sponsor) == null ? void 0 : b.logo) && e.logoMode === s.LEFT && /* @__PURE__ */ a(ee, { children: (f = e.sponsor) == null ? void 0 : f.name }),
-              /* @__PURE__ */ l(ae, { className: "SponsorText", children: [
-                /* @__PURE__ */ a(le, { children: "AD" }),
-                /* @__PURE__ */ a(re, { children: "SPONSORED" })
+              ((T = o.sponsor) == null ? void 0 : T.logo) && o.logoMode === l.LEFT && /* @__PURE__ */ e(po, { children: (N = o.sponsor) == null ? void 0 : N.name }),
+              /* @__PURE__ */ r(uo, { className: "SponsorText", children: [
+                /* @__PURE__ */ e(yo, { children: "AD" }),
+                /* @__PURE__ */ e(fo, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ a(
-        J,
+      /* @__PURE__ */ e(
+        to,
         {
           className: "ClosePromoIcon",
-          close: W,
-          autoClose: (g = e.closeTimer) == null ? void 0 : g.auto,
-          duration: V ? 0 : (p = e.closeTimer) == null ? void 0 : p.seconds
+          close: Q,
+          autoClose: (v = o.closeTimer) == null ? void 0 : v.auto,
+          duration: K ? 0 : (x = o.closeTimer) == null ? void 0 : x.seconds,
+          isPlaying: Y
         }
       )
     ] }),
-    /* @__PURE__ */ l(te, { children: [
-      c && /* @__PURE__ */ a(G, { className: se, src: (T = e.sponsor) == null ? void 0 : T.logo, alt: "promo" }),
-      /* @__PURE__ */ a(H, { children: (P = (N = e.banner) == null ? void 0 : N.video) != null && P.url ? /* @__PURE__ */ a(
-        K,
+    /* @__PURE__ */ r(bo, { children: [
+      d && /* @__PURE__ */ e(z, { className: go, src: (B = o.sponsor) == null ? void 0 : B.logo, alt: "promo" }),
+      /* @__PURE__ */ e(J, { children: (E = (C = o.banner) == null ? void 0 : C.video) != null && E.url ? /* @__PURE__ */ e(
+        no,
         {
-          source: (v = (B = e.banner) == null ? void 0 : B.video) == null ? void 0 : v.url,
-          poster: (A = (x = e.banner) == null ? void 0 : x.video) == null ? void 0 : A.thumbnailUrl,
-          aspectRatio: o ? "1/1" : "16/9",
+          source: (M = (O = o.banner) == null ? void 0 : O.video) == null ? void 0 : M.url,
+          poster: (L = (S = o.banner) == null ? void 0 : S.video) == null ? void 0 : L.thumbnailUrl,
+          aspectRatio: s ? "1/1" : "16/9",
+          onPause: () => {
+            m && u(!1);
+          },
           onPlay: () => {
-            k.emit("advertisement", {
+            oo.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: t,
-                type: e.type
+                id: a,
+                type: o.type
               }
-            });
+            }), u(!0);
           },
-          autoPlay: e.autoPlayVideo === q.ENABLED
+          controlVideo: t,
+          autoPlay: m
         }
-      ) : (C = e.banner) != null && C.imageUrl ? /* @__PURE__ */ a(ne, { style: o ? { aspectRatio: "1/1" } : {}, src: (E = e.banner) == null ? void 0 : E.imageUrl, alt: "promo" }) : null }),
-      !o && /* @__PURE__ */ l(H, { children: [
-        ((m = e.banner) == null ? void 0 : m.title) && /* @__PURE__ */ a(oe, { className: I("AdvTitle", c && ce), children: (M = e.banner) == null ? void 0 : M.title }),
-        ((O = e.banner) == null ? void 0 : O.body) && /* @__PURE__ */ a(de, { className: "AdvDescription", children: (L = e.banner) == null ? void 0 : L.body })
+      ) : (I = o.banner) != null && I.imageUrl ? /* @__PURE__ */ e(ho, { style: s ? { aspectRatio: "1/1" } : {}, src: (D = o.banner) == null ? void 0 : D.imageUrl, alt: "promo" }) : null }),
+      !s && /* @__PURE__ */ r(J, { children: [
+        ((R = o.banner) == null ? void 0 : R.title) && /* @__PURE__ */ e(Po, { className: W("AdvTitle", d && Ao), children: (U = o.banner) == null ? void 0 : U.title }),
+        ((_ = o.banner) == null ? void 0 : _.body) && /* @__PURE__ */ e(To, { className: "AdvDescription", children: (k = o.banner) == null ? void 0 : k.body })
       ] })
     ] }),
-    e.buttonType !== z.NO_BUTTON && /* @__PURE__ */ a(ie, { children: /* @__PURE__ */ a(
-      ye,
+    o.buttonType !== ro.NO_BUTTON && /* @__PURE__ */ e(No, { children: /* @__PURE__ */ e(
+      vo,
       {
-        href: r,
+        href: n,
         style: {
-          backgroundColor: ((D = (S = e.banner) == null ? void 0 : S.ctaButton) == null ? void 0 : D.color) || "#009dc4",
-          color: ((U = (R = e.banner) == null ? void 0 : R.ctaButton) == null ? void 0 : U.textColor) || "#fff"
+          backgroundColor: ((V = (F = o.banner) == null ? void 0 : F.ctaButton) == null ? void 0 : V.color) || "#009dc4",
+          color: ((G = (j = o.banner) == null ? void 0 : j.ctaButton) == null ? void 0 : G.textColor) || "#fff"
         },
         "data-analytics": "button",
-        "data-promo-id": t,
-        "data-promo-type": e.type,
+        "data-promo-id": a,
+        "data-promo-type": o.type,
         target: "_blank",
-        children: (F = (_ = e.banner) == null ? void 0 : _.ctaButton) == null ? void 0 : F.label
+        children: (w = (H = o.banner) == null ? void 0 : H.ctaButton) == null ? void 0 : w.label
       }
     ) })
   ] });
 };
 export {
-  Pe as Overlay,
-  xe as OverlayContainer
+  Do as Overlay,
+  _o as OverlayContainer
 };

package/lib/ui/close-btn/index.d.ts

@@ -3,5 +3,6 @@ export declare const CloseButton: React.FC<{
     close?: () => void;
     duration?: number;
     autoClose?: CloseTimerAuto;
+    isPlaying?: boolean;
     className?: string;
 }>;

package/lib/ui/close-btn/index.js

@@ -1,47 +1,49 @@
 import { jsx as e } from "react/jsx-runtime";
 import { styled as s } from "@linaria/react";
-import { useState as p, useEffect as f, useCallback as l } from "react";
-import { CloseTimerAuto as a } from "@streamlayer/sdk-web-types";
-import { SvgIcon as I } from "../icons/index.js";
-import { SimpleTimer as u } from "../timer/index.js";
-const v = /* @__PURE__ */ s("div")({
+import { useState as f, useEffect as l, useCallback as a } from "react";
+import { CloseTimerAuto as I } from "@streamlayer/sdk-web-types";
+import { SvgIcon as u } from "../icons/index.js";
+import { SimpleTimer as v } from "../timer/index.js";
+const T = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
   class: "c3v6bv6",
   propsAsIs: !1
-}), T = /* @__PURE__ */ s("div")({
+}), g = /* @__PURE__ */ s("div")({
   name: "TimerWrap",
   class: "teuhmro",
   propsAsIs: !1
-}), g = () => I, x = /* @__PURE__ */ s(g())({
+}), x = () => u, A = /* @__PURE__ */ s(x())({
   name: "Icon",
   class: "i17rfxv5",
   propsAsIs: !0
-}), S = ({
+}), b = ({
   close: r,
-  className: t,
+  className: n,
+  isPlaying: c = !0,
   duration: o = 0,
-  autoClose: m
+  autoClose: t
 }) => {
-  const [c, n] = p(o === 0);
-  f(() => {
-    n(!o);
+  const [i, m] = f(o === 0);
+  l(() => {
+    m(!o);
   }, [o]);
-  const i = l(() => {
-    m === a.ENABLED ? r == null || r() : n(!0);
-  }, [m, r]);
-  return c ? /* @__PURE__ */ e(v, {
+  const p = a(() => {
+    t === I.ENABLED ? r == null || r() : m(!0);
+  }, [t, r]);
+  return i ? /* @__PURE__ */ e(T, {
     onClick: r,
-    className: t,
-    children: /* @__PURE__ */ e(x, {
+    className: n,
+    children: /* @__PURE__ */ e(A, {
       name: "icon-cross"
     })
-  }) : /* @__PURE__ */ e(T, {
-    children: /* @__PURE__ */ e(u, {
+  }) : /* @__PURE__ */ e(g, {
+    children: /* @__PURE__ */ e(v, {
+      isPlaying: c,
       duration: o,
-      onTimerExpired: i
+      onTimerExpired: p
     })
   });
 };
 export {
-  S as CloseButton
+  b as CloseButton
 };

package/lib/ui/gamification/question/insight/styles.d.ts

@@ -1,2 +1,10 @@
-export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ActionBtn: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const Container: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const ActionBtn: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;

package/lib/ui/gamification/question/insight/styles.js

@@ -1,14 +1,15 @@
-import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+import { styled as t } from "@linaria/react";
+import { QuestionItem as o, PlayButton as n } from "../styles.js";
+const s = () => o, i = /* @__PURE__ */ t(s())({
   name: "Container",
   class: "cll3md7",
-  propsAsIs: !1
-}), o = /* @__PURE__ */ s("button")({
+  propsAsIs: !0
+}), e = () => n, p = /* @__PURE__ */ t(e())({
   name: "ActionBtn",
   class: "a10g1iik",
-  propsAsIs: !1
+  propsAsIs: !0
 });
 export {
-  o as ActionBtn,
-  t as Container
+  p as ActionBtn,
+  i as Container
 };