@streamlayer/react-ui 1.9.0 → 1.11.0

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

@@ -1,21 +1,24 @@
-import { jsx as n } from "react/jsx-runtime";
-import { SlideIn as l } from "../../slide-in/index.js";
-import { BannerContainer as d, BannerLink as m } from "./styles.js";
-const c = ({ promotion: a, promotionId: e, hiding: t, direction: i = "bottom" }) => {
-  var r;
-  return (r = a.additionalBanner) != null && r.imageUrl ? /* @__PURE__ */ n(l, { direction: i, hiding: t, children: /* @__PURE__ */ n(d, { className: "BannerContainer", children: /* @__PURE__ */ n(
-    m,
+import { jsx as r } from "react/jsx-runtime";
+import { SlideIn as m } from "../../slide-in/index.js";
+import { BannerContainer as o, BannerLink as s } from "./styles.js";
+const B = ({ promotion: a, promotionId: i, hiding: l, direction: d = "bottom" }) => {
+  var e, t;
+  if (!((e = a.additionalBanner) != null && e.imageUrl))
+    return null;
+  let n = (t = a.banner) == null ? void 0 : t.url;
+  return n && n.indexOf("http") !== 0 && (n = `https://${n}`), /* @__PURE__ */ r(m, { direction: d, hiding: l, children: /* @__PURE__ */ r(o, { className: "BannerContainer", children: /* @__PURE__ */ r(
+    s,
     {
       className: "BannerLink",
-      href: a.additionalBanner.url,
+      href: n,
       style: { backgroundImage: `url(${a.additionalBanner.imageUrl})` },
-      "data-promo-id": e,
+      "data-promo-id": i,
       "data-promo-type": a.type,
       "data-analytics": "banner",
       target: "_blank"
     }
-  ) }) }) : null;
+  ) }) });
 };
 export {
-  c as Banner
+  B as Banner
 };

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

@@ -4,7 +4,10 @@ export declare const AdvertisementUI: React.FC<{
     layoutMode?: 'cover' | 'side-by-side';
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
+    open?: () => void;
     close?: () => void;
+    markAsViewed?: () => void;
     isNotification?: boolean;
     skipTypeCheck?: boolean;
+    skipAutoClose?: boolean;
 }>;

package/lib/ui/advertisement/index.js

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

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

@@ -8,4 +8,5 @@ export declare const Notification: React.FC<{
     promotionId: string;
     direction?: 'left' | 'right';
     hiding?: boolean;
+    open?: () => void;
 }>;

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

@@ -1,38 +1,41 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { NotificationPromotionImagePosition as r, NotificationEnabled as M, NotificationSponsorLogoMode as C, CtaIconMode as O } from "@streamlayer/sdk-web-types";
-import { SlideIn as T } from "../../slide-in/index.js";
-import { MediaImgFit as c, MediaImgCentered as h, MediaImgBottom as f, MediaImgSolid as E, MediaImgMiddle as S, NotificationContainer as L, Logo as _, NotificationContent as b, Body as A, Title as P, Text as R, Button as x, CtaIcon as D, StyledChevronRight as y } from "./styles.js";
-const F = {
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { NotificationPromotionImagePosition as r, NotificationEnabled as T, NotificationPromotionMode as h, NotificationSponsorLogoMode as C, CtaIconMode as O } from "@streamlayer/sdk-web-types";
+import { SlideIn as f } from "../../slide-in/index.js";
+import { LowerThirdNotification as E } from "./lower-third/index.js";
+import { MediaImgFit as c, MediaImgCentered as L, MediaImgBottom as S, MediaImgSolid as _, MediaImgMiddle as R, NotificationContainer as P, Logo as b, NotificationContent as A, Body as D, Title as x, Text as y, Button as F, CtaIcon as j, StyledChevronRight as k } from "./styles.js";
+const v = {
   [r.UNSET]: c,
   [r.FIT]: c,
-  [r.CENTERED]: h,
-  [r.BOTTOM]: f,
-  [r.SOLID]: E,
-  [r.MIDDLE]: S
-}, j = ({ src: e, imagePosition: t }) => {
-  const d = F[t];
-  return /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
-}, q = ({ notification: e, promotionId: t, hiding: d, direction: I = "left" }) => {
-  if (!e || !e.promotion || e.enabled !== M.NOTIFICATION_ENABLED)
+  [r.CENTERED]: L,
+  [r.BOTTOM]: S,
+  [r.SOLID]: _,
+  [r.MIDDLE]: R
+}, w = ({ src: e, imagePosition: n }) => {
+  const m = v[n];
+  return /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
+}, z = ({ notification: e, open: n, promotionId: m, hiding: I, direction: N = "left" }) => {
+  if (!e || !e.promotion || e.enabled !== T.NOTIFICATION_ENABLED)
     return null;
-  const { title: l, body: m, image: s, promotion: a } = e, { sponsorLogo: N, sponsorLogoMode: g, imagePosition: p, ctaButton: o } = a;
-  return /* @__PURE__ */ i(T, { direction: I, hiding: d, children: /* @__PURE__ */ n(L, { children: [
-    g !== C.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i("img", { src: N, alt: l }) }),
-    /* @__PURE__ */ n(b, { children: [
-      /* @__PURE__ */ i(j, { src: s, imagePosition: p }),
-      /* @__PURE__ */ n(A, { children: [
-        l && /* @__PURE__ */ i(P, { children: l }),
-        m && /* @__PURE__ */ i(R, { children: m })
+  if (e.promotion.mode === h.LOWER_THIRD)
+    return /* @__PURE__ */ i(E, { notification: e, open: n });
+  const { title: t, body: l, image: a, promotion: s } = e, { sponsorLogo: g, sponsorLogoMode: p, imagePosition: M, ctaButton: o } = s;
+  return /* @__PURE__ */ i(f, { className: "SL_Rich_Notification", direction: N, hiding: I, children: /* @__PURE__ */ d(P, { onClick: n, children: [
+    p !== C.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i("img", { src: g, alt: t }) }),
+    /* @__PURE__ */ d(A, { children: [
+      /* @__PURE__ */ i(w, { src: a, imagePosition: M }),
+      /* @__PURE__ */ d(D, { children: [
+        t && /* @__PURE__ */ i(x, { children: t }),
+        l && /* @__PURE__ */ i(y, { children: l })
       ] }),
-      /* @__PURE__ */ n(x, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
-        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === O.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(D, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+      /* @__PURE__ */ d(F, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
+        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === O.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(j, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
         (o == null ? void 0 : o.label) || "Open"
       ] }),
-      /* @__PURE__ */ i(y, { name: "chevronRight" })
+      /* @__PURE__ */ i(k, { name: "chevronRight" })
     ] })
   ] }) });
 };
 export {
-  q as Notification,
-  j as NotificationMedia
+  z as Notification,
+  w as NotificationMedia
 };

package/lib/ui/advertisement/notification/lower-third/index.d.ts

@@ -0,0 +1,9 @@
+import { QuestionNotification, PromotionNotification } from '@streamlayer/sdk-web-types';
+export declare const NotificationMedia: React.FC<{
+    src: string;
+    imagePosition: PromotionNotification['imagePosition'];
+}>;
+export declare const LowerThirdNotification: React.FC<{
+    notification?: QuestionNotification;
+    open?: () => void;
+}>;

package/lib/ui/advertisement/notification/lower-third/index.js

@@ -0,0 +1,37 @@
+import { jsx as i, jsxs as r, Fragment as g } from "react/jsx-runtime";
+import { NotificationPromotionImagePosition as d, NotificationEnabled as O, NotificationSponsorLogoMode as T, CtaIconMode as h } from "@streamlayer/sdk-web-types";
+import { MediaImgBottom as t, MediaImgMiddle as p, NotificationContainer as C, NotificationContent as M, Body as L, Title as f, Text as _, Footer as b, Logo as A, Vector as E, Button as P, CtaIcon as x } from "./styles.js";
+const S = {
+  [d.BOTTOM]: t,
+  [d.MIDDLE]: p
+}, F = ({ src: e, imagePosition: c }) => {
+  const n = S[c] || t;
+  return /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
+}, j = ({ notification: e, open: c }) => {
+  if (!e || !e.promotion || e.enabled !== O.NOTIFICATION_ENABLED)
+    return null;
+  const { title: n, body: l, image: s, promotion: m } = e, { sponsorLogo: a, sponsorLogoMode: N, imagePosition: I, ctaButton: o } = m;
+  return /* @__PURE__ */ r(C, { className: "SL_Lower_Third_Notification", onClick: c, children: [
+    /* @__PURE__ */ r(M, { children: [
+      /* @__PURE__ */ i(F, { src: s, imagePosition: I }),
+      /* @__PURE__ */ r(L, { children: [
+        n && /* @__PURE__ */ i(f, { children: n }),
+        l && /* @__PURE__ */ i(_, { children: l })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(b, { children: [
+      N !== T.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ r(g, { children: [
+        /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i("img", { src: a, alt: n }) }),
+        /* @__PURE__ */ i(E, {})
+      ] }),
+      /* @__PURE__ */ r(P, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
+        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === h.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(x, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+        (o == null ? void 0 : o.label) || "Open"
+      ] })
+    ] })
+  ] });
+};
+export {
+  j as LowerThirdNotification,
+  F as NotificationMedia
+};

package/lib/ui/advertisement/notification/lower-third/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const NotificationContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Text: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MediaImgBottom: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MediaImgMiddle: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const CtaIcon: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Button: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const Logo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Footer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Vector: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/advertisement/notification/lower-third/styles.js

@@ -0,0 +1,64 @@
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "NotificationContent",
+  class: "n18wsqoo",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b1ia90c2",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tg2z08v",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Text",
+  class: "t59zdk1",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "MediaImgBottom",
+  class: "m1ab9fq",
+  propsAsIs: !1
+}), t = () => o, l = /* @__PURE__ */ s(t())({
+  name: "MediaImgMiddle",
+  class: "m9fsr0y",
+  propsAsIs: !0
+}), p = /* @__PURE__ */ s("img")({
+  name: "CtaIcon",
+  class: "cvi9y5q",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("button")({
+  name: "Button",
+  class: "bgl6boa",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Logo",
+  class: "l5mq0z",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Footer",
+  class: "f1mse0ft",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "Vector",
+  class: "v1hcloah",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "n3n65jf",
+  propsAsIs: !1
+});
+export {
+  n as Body,
+  m as Button,
+  p as CtaIcon,
+  d as Footer,
+  r as Logo,
+  o as MediaImgBottom,
+  l as MediaImgMiddle,
+  I as NotificationContainer,
+  e as NotificationContent,
+  i as Text,
+  c as Title,
+  f as Vector
+};

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

@@ -4,5 +4,7 @@ export declare const Overlay: React.FC<{
     promotionId: string;
     promotion: PromotionOptions;
     onClose?: () => void;
+    markAsViewed?: () => void;
+    skipAutoClose?: boolean;
     inSidebar?: boolean;
 }>;

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

@@ -1,77 +1,92 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { cx as D } from "@linaria/core";
+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 R, PromotionLogoMode as n, PromotionButtonType as j } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as G } from "../../video-player/index.js";
-import { PromoOverlay as H, Header as W, HeaderContent as V, headerContentShift as q, SponsorLogo as _, Sponsor as w, SponsorName as z, SponsorText as J, ADLogo as K, SponsoredText as Q, CloseIconWrap as X, CloseIcon as Y, Media as Z, shiftMedia as $, Content as F, PromoImg as ee, Title as re, hideOnMobile as ae, Description as ne, ActionBtnWrap as le, ActionButton as oe } from "./styles.js";
-import { OverlayContainer as pe } from "./styles.js";
-const be = ({ promotion: e, promotionId: s, onClose: U }) => {
-  var t, c, d, i, y, b, h, g, p, u, m, T, f, v, N, C, x, A, B, P, M, I, O, S, E, L;
-  const l = e.type === R.INGAME_IAB11_LBAR || e.type === R.INGAME_IAB11, o = ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === n.CENTER;
-  return /* @__PURE__ */ a(H, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ a(W, { children: [
-      /* @__PURE__ */ a(V, { className: D(!o && q), children: [
-        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(_, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
-        /* @__PURE__ */ a(
+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,
           {
             style: {
-              paddingLeft: (i = e.sponsor) != null && i.logo && e.logoMode === n.LEFT ? "0px" : "8px"
+              paddingLeft: (h = e.sponsor) != null && h.logo && e.logoMode === s.LEFT ? "0px" : "8px"
             },
             children: [
-              ((y = e.sponsor) == null ? void 0 : y.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(z, { children: (b = e.sponsor) == null ? void 0 : b.name }),
-              /* @__PURE__ */ a(J, { className: "SponsorText", children: [
-                /* @__PURE__ */ r(K, { children: "AD" }),
-                /* @__PURE__ */ r(Q, { children: "SPONSORED" })
+              ((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" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ r(X, { className: "ClosePromoIcon", onClick: U, children: /* @__PURE__ */ r(Y, { name: "icon-cross" }) })
+      /* @__PURE__ */ a(
+        J,
+        {
+          className: "ClosePromoIcon",
+          close: W,
+          autoClose: (g = e.closeTimer) == null ? void 0 : g.auto,
+          duration: V ? 0 : (p = e.closeTimer) == null ? void 0 : p.seconds
+        }
+      )
     ] }),
-    /* @__PURE__ */ a(Z, { children: [
-      o && /* @__PURE__ */ r(_, { className: $, src: (h = e.sponsor) == null ? void 0 : h.logo, alt: "promo" }),
-      /* @__PURE__ */ r(F, { children: (p = (g = e.banner) == null ? void 0 : g.video) != null && p.url ? /* @__PURE__ */ r(
-        G,
+    /* @__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,
         {
-          source: (m = (u = e.banner) == null ? void 0 : u.video) == null ? void 0 : m.url,
-          poster: (f = (T = e.banner) == null ? void 0 : T.video) == null ? void 0 : f.thumbnailUrl,
-          aspectRatio: l ? "1/1" : "16/9",
+          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",
           onPlay: () => {
             k.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                advertisementId: s,
-                advertisementType: e.type
+                id: t,
+                type: e.type
               }
             });
-          }
+          },
+          autoPlay: e.autoPlayVideo === q.ENABLED
         }
-      ) : (v = e.banner) != null && v.imageUrl ? /* @__PURE__ */ r(ee, { style: l ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
-      !l && /* @__PURE__ */ a(F, { children: [
-        ((C = e.banner) == null ? void 0 : C.title) && /* @__PURE__ */ r(re, { className: D("AdvTitle", o && ae), children: (x = e.banner) == null ? void 0 : x.title }),
-        ((A = e.banner) == null ? void 0 : A.body) && /* @__PURE__ */ r(ne, { className: "AdvDescription", children: (B = e.banner) == null ? void 0 : B.body })
+      ) : (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 })
       ] })
     ] }),
-    e.buttonType !== j.NO_BUTTON && /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(
-      oe,
+    e.buttonType !== z.NO_BUTTON && /* @__PURE__ */ a(ie, { children: /* @__PURE__ */ a(
+      ye,
       {
-        href: (P = e.banner) == null ? void 0 : P.url,
+        href: r,
         style: {
-          backgroundColor: ((I = (M = e.banner) == null ? void 0 : M.ctaButton) == null ? void 0 : I.color) || "#009dc4",
-          color: ((S = (O = e.banner) == null ? void 0 : O.ctaButton) == null ? void 0 : S.textColor) || "#fff"
+          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"
         },
         "data-analytics": "button",
-        "data-promo-id": s,
+        "data-promo-id": t,
         "data-promo-type": e.type,
         target: "_blank",
-        children: (L = (E = e.banner) == null ? void 0 : E.ctaButton) == null ? void 0 : L.label
+        children: (F = (_ = e.banner) == null ? void 0 : _.ctaButton) == null ? void 0 : F.label
       }
     ) })
   ] });
 };
 export {
-  be as Overlay,
-  pe as OverlayContainer
+  Pe as Overlay,
+  xe as OverlayContainer
 };

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

@@ -14,8 +14,6 @@ export declare const Sponsor: import('@linaria/react').StyledComponent<import('r
 export declare const SponsorText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ADLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SponsoredText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const CloseIcon: any;
 export declare const ActionBtnWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ActionButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
 export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,103 +1,92 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as o } from "../../icons/index.js";
-const t = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "OverlayContainer",
   class: "okzhq2w",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), a = /* @__PURE__ */ s("div")({
   name: "PromoOverlay",
   class: "pmgz5i",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "Header",
   class: "hyxi3jt",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), l = "h10toh7", i = /* @__PURE__ */ s("img")({
+}), p = "h10toh7", r = /* @__PURE__ */ s("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Media",
   class: "m1crmu01",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("img")({
+}), i = /* @__PURE__ */ s("img")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), f = "s1nmch9k", A = /* @__PURE__ */ s("div")({
+}), m = "s1nmch9k", d = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
-}), v = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "Description",
   class: "dydopmr",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Sponsor",
   class: "s1w6nt04",
   propsAsIs: !1
-}), h = /* @__PURE__ */ s("div")({
+}), I = /* @__PURE__ */ s("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), S = /* @__PURE__ */ s("div")({
+}), v = /* @__PURE__ */ s("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), x = /* @__PURE__ */ s("span")({
+}), h = /* @__PURE__ */ s("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("div")({
-  name: "CloseIconWrap",
-  class: "c8d4xfk",
-  propsAsIs: !1
-}), e = () => o, y = /* @__PURE__ */ s(e())({
-  name: "CloseIcon",
-  class: "ct6oobh",
-  propsAsIs: !0
-}), T = /* @__PURE__ */ s("div")({
+}), g = /* @__PURE__ */ s("div")({
   name: "ActionBtnWrap",
-  class: "a1gyg7tt",
+  class: "a8d4xfk",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("a")({
+}), S = /* @__PURE__ */ s("a")({
   name: "ActionButton",
-  class: "a17rwbtk",
+  class: "at6oobh",
   propsAsIs: !1
-}), w = /* @__PURE__ */ s("div")({
+}), x = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "t3vxzaw",
+  class: "t1gyg7tt",
   propsAsIs: !1
-}), O = "h10f3u0j";
+}), y = "h17rwbtk";
 export {
-  S as ADLogo,
-  T as ActionBtnWrap,
-  u as ActionButton,
-  y as CloseIcon,
-  C as CloseIconWrap,
-  A as Content,
-  v as Description,
-  r as Header,
-  c as HeaderContent,
-  d as Media,
-  t as OverlayContainer,
-  I as PromoImg,
-  p as PromoOverlay,
-  g as Sponsor,
-  i as SponsorLogo,
-  m as SponsorName,
-  h as SponsorText,
-  x as SponsoredText,
-  w as Title,
-  l as headerContentShift,
-  O as hideOnMobile,
-  f as shiftMedia
+  v as ADLogo,
+  g as ActionBtnWrap,
+  S as ActionButton,
+  d as Content,
+  A as Description,
+  n as Header,
+  t as HeaderContent,
+  l as Media,
+  e as OverlayContainer,
+  i as PromoImg,
+  a as PromoOverlay,
+  f as Sponsor,
+  r as SponsorLogo,
+  c as SponsorName,
+  I as SponsorText,
+  h as SponsoredText,
+  x as Title,
+  p as headerContentShift,
+  y as hideOnMobile,
+  m as shiftMedia
 };

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

@@ -0,0 +1,7 @@
+import { CloseTimerAuto } from '@streamlayer/sdk-web-types';
+export declare const CloseButton: React.FC<{
+    close?: () => void;
+    duration?: number;
+    autoClose?: CloseTimerAuto;
+    className?: string;
+}>;