@streamlayer/react-ui 1.26.1 → 1.27.1

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

@@ -1,64 +1,79 @@
 import { styled as s } from "@linaria/react";
-const e = /* @__PURE__ */ s("div")({
+const i = /* @__PURE__ */ s("div")({
   name: "NotificationContent",
   class: "n18wsqoo",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "b1ia90c2",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "tg2z08v",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "Text",
   class: "t59zdk1",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "MediaImgBottom",
   class: "m1ab9fq",
   propsAsIs: !1
-}), t = () => o, l = /* @__PURE__ */ s(t())({
+}), n = () => t, r = /* @__PURE__ */ s(n())({
   name: "MediaImgMiddle",
   class: "m9fsr0y",
   propsAsIs: !0
-}), p = /* @__PURE__ */ s("img")({
+}), f = /* @__PURE__ */ s("img")({
   name: "CtaIcon",
   class: "cvi9y5q",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("button")({
+}), d = /* @__PURE__ */ s("button")({
   name: "Button",
   class: "bgl6boa",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), I = /* @__PURE__ */ s("div")({
   name: "Logo",
   class: "l5mq0z",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "Footer",
   class: "f1mse0ft",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), u = /* @__PURE__ */ s("div")({
   name: "Vector",
   class: "v1hcloah",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), v = /* @__PURE__ */ s("div")({
   name: "NotificationContainer",
   class: "n3n65jf",
   propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "TVButton",
+  class: "tkkfuqy",
+  propsAsIs: !1
+}), a = () => o, B = /* @__PURE__ */ s(a())({
+  name: "DismissButton",
+  class: "dh9vato",
+  propsAsIs: !0
+}), e = () => o, g = /* @__PURE__ */ s(e())({
+  name: "OpenButton",
+  class: "oeah8gv",
+  propsAsIs: !0
 });
 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
+  p as Body,
+  d as Button,
+  f as CtaIcon,
+  B as DismissButton,
+  A as Footer,
+  I as Logo,
+  t as MediaImgBottom,
+  r as MediaImgMiddle,
+  v as NotificationContainer,
+  i as NotificationContent,
+  g as OpenButton,
+  o as TVButton,
+  m as Text,
+  l as Title,
+  u as Vector
 };

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

@@ -32,5 +32,22 @@ export declare const MediaImgMiddle: {
 }>;
 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 StyledChevronRight: any;
+export declare const StyledChevronRight: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const Logo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TVButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const DismissButton: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const OpenButton: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;

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

@@ -1,85 +1,100 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as t } from "../../icons/index.js";
-const d = /* @__PURE__ */ s("div")({
+import { SvgIcon as e } from "../../icons/index.js";
+const f = /* @__PURE__ */ s("div")({
   name: "CardContainer",
   class: "cghcyv4",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), g = /* @__PURE__ */ s("div")({
   name: "NotificationContent",
   class: "n1ku6hz",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "NotificationContainer",
   class: "nbxqmol",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), v = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "b1gu3eml",
   propsAsIs: !1
-}), v = /* @__PURE__ */ s("div")({
+}), C = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "t1u17zva",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
+}), M = /* @__PURE__ */ s("div")({
   name: "Text",
   class: "t10ko1g",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Media",
   class: "mntc42e",
   propsAsIs: !1
-}), e = () => o, C = /* @__PURE__ */ s(e())({
+}), n = () => t, x = /* @__PURE__ */ s(n())({
   name: "MediaImgFit",
   class: "ml060eo",
   propsAsIs: !0
-}), a = () => o, n = /* @__PURE__ */ s(a())({
+}), a = () => t, c = /* @__PURE__ */ s(a())({
   name: "MediaImgCentered",
   class: "m1vqlvig",
   propsAsIs: !0
-}), i = () => n, M = /* @__PURE__ */ s(i())({
+}), i = () => c, B = /* @__PURE__ */ s(i())({
   name: "MediaImgBottom",
   class: "m1e7tvi5",
   propsAsIs: !0
-}), c = () => o, u = /* @__PURE__ */ s(c())({
+}), p = () => t, _ = /* @__PURE__ */ s(p())({
   name: "MediaImgSolid",
   class: "mqvntt2",
   propsAsIs: !0
-}), m = () => o, x = /* @__PURE__ */ s(m())({
+}), m = () => t, h = /* @__PURE__ */ s(m())({
   name: "MediaImgMiddle",
   class: "m12jtj3u",
   propsAsIs: !0
-}), h = /* @__PURE__ */ s("img")({
+}), y = /* @__PURE__ */ s("img")({
   name: "CtaIcon",
   class: "ckq1frv",
   propsAsIs: !1
-}), y = /* @__PURE__ */ s("button")({
+}), b = /* @__PURE__ */ s("button")({
   name: "Button",
   class: "bis90pl",
   propsAsIs: !1
-}), p = () => t, B = /* @__PURE__ */ s(p())({
+}), l = () => e, T = /* @__PURE__ */ s(l())({
   name: "StyledChevronRight",
   class: "s9mjmz3",
   propsAsIs: !0
-}), _ = /* @__PURE__ */ s("div")({
+}), k = /* @__PURE__ */ s("div")({
   name: "Logo",
   class: "l1cf50a7",
   propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "TVButton",
+  class: "thdqfl0",
+  propsAsIs: !1
+}), r = () => o, q = /* @__PURE__ */ s(r())({
+  name: "DismissButton",
+  class: "d11pe8bx",
+  propsAsIs: !0
+}), d = () => o, S = /* @__PURE__ */ s(d())({
+  name: "OpenButton",
+  class: "oy9k0kp",
+  propsAsIs: !0
 });
 export {
-  f as Body,
-  y as Button,
-  d as CardContainer,
-  h as CtaIcon,
-  _ as Logo,
-  o as Media,
-  M as MediaImgBottom,
-  n as MediaImgCentered,
-  C as MediaImgFit,
-  x as MediaImgMiddle,
-  u as MediaImgSolid,
-  g as NotificationContainer,
-  I as NotificationContent,
-  B as StyledChevronRight,
-  A as Text,
-  v as Title
+  v as Body,
+  b as Button,
+  f as CardContainer,
+  y as CtaIcon,
+  q as DismissButton,
+  k as Logo,
+  t as Media,
+  B as MediaImgBottom,
+  c as MediaImgCentered,
+  x as MediaImgFit,
+  h as MediaImgMiddle,
+  _ as MediaImgSolid,
+  A as NotificationContainer,
+  g as NotificationContent,
+  S as OpenButton,
+  T as StyledChevronRight,
+  o as TVButton,
+  M as Text,
+  C as Title
 };

package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.d.ts

@@ -1,4 +1,4 @@
-import { VastIcon } from '@dailymotion/vast-client';
+import { VastIcon, VASTTracker } from '@dailymotion/vast-client';
 import { RefObject } from 'react';
 type GAMPlayerCore = {
     time: number;
@@ -15,5 +15,5 @@ type GAMPlayerCore = {
     autoplay: boolean;
     adAction: (e: React.MouseEvent<HTMLElement>) => void;
 };
-export declare const useGAMPlayer: (container: RefObject<HTMLDivElement>, adUrl?: string) => readonly [import('nanostores').PreinitializedMapStore<GAMPlayerCore> & object, () => void, () => void, () => void];
+export declare const useGAMPlayer: (container: RefObject<HTMLDivElement>, adUrl?: string) => readonly [import('nanostores').PreinitializedMapStore<GAMPlayerCore> & object, () => void, () => void, () => void, import('react').MutableRefObject<VASTTracker | undefined>];
 export {};

package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js

@@ -33192,7 +33192,7 @@ const fv = (s) => {
     }));
   }, [l, n, i]), $a(() => t.subscribe((f) => {
     f && (xe.setKey("adCount", f.ads.length), xe.setKey("adPosition", 0), n());
-  }), [t, i, n]), [xe, a, l, d];
+  }), [t, i, n]), [xe, a, l, d, r];
 };
 export {
   bv as useGAMPlayer

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

@@ -13,6 +13,9 @@ export type OverlayProps = {
     externalAd?: Advertisement['externalAd'];
     controlVideo: ControlVideoCb;
     advertisementPaused: boolean;
-    togglePause: (flag: boolean) => void;
+    muted?: boolean;
+    togglePause?: (flag: boolean) => void;
+    isEventFired: Advertisement['isEventFired'];
+    fireEvent: Advertisement['fireEvent'];
 };
 export declare const Overlay: React.FC<OverlayProps>;

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

@@ -1,118 +1,176 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { cx as K } from "@linaria/core";
-import { useEffect as u } from "react";
-import { eventBus as eo } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as f, PromotionLogoMode as s, AutoPlayVideo as ro, PromotionButtonType as to } from "@streamlayer/sdk-web-types";
-import { CloseButton as no } from "../../close-btn/index.js";
-import { VideoPlayer as ao } from "../../video-player/index.js";
-import { ExternalAdOverlay as lo } from "./externalAd/index.js";
-import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as po, SponsorLogo as Q, Sponsor as co, SponsorName as yo, SponsorText as uo, ADLogo as fo, SponsoredText as ho, Media as bo, shiftMedia as Ao, Content as X, PromoImg as vo, Title as Po, hideOnMobile as Bo, Description as No, ActionBtnWrap as To, ActionButton as xo } from "./styles.js";
-import { OverlayContainer as Fo } from "./styles.js";
-const Ro = (h) => {
-  var v, P, B, N, T, x, C, E, g, I, S, M, L, O, D, R, _, k, F, U, V, G, j, H, w, W, $, q, z, J;
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { cx as oo } from "@linaria/core";
+import { useEffect as A } from "react";
+import { eventBus as d } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as P, PromotionLogoMode as y, AutoPlayVideo as po, PlayVideoMuted as mo, PromotionButtonType as so } from "@streamlayer/sdk-web-types";
+import { CloseButton as yo } from "../../close-btn/index.js";
+import { VideoPlayer as co } from "../../video-player/index.js";
+import { ExternalAdOverlay as uo } from "./externalAd/index.js";
+import { PromoOverlay as ho, Header as bo, HeaderContent as fo, headerContentShift as Ao, SponsorLogo as eo, Sponsor as Po, SponsorName as Mo, SponsorText as Bo, ADLogo as No, SponsoredText as Co, Media as To, shiftMedia as xo, Content as to, PromoImg as go, Title as Io, hideOnMobile as So, Description as Lo, ActionBtnWrap as Ro, ActionButton as Oo } from "./styles.js";
+import { OverlayContainer as Qo } from "./styles.js";
+const Ho = (M) => {
+  var C, T, x, g, I, S, L, R, O, D, V, _, U, k, v, G, $, j, H, q, w, Q, W, z, J, K, X, Y, Z, E;
   const {
     promotion: o,
-    open: d,
-    advertisementPaused: Y,
-    togglePause: r,
-    controlVideo: n,
-    skipAutoClose: Z,
-    promotionId: l,
-    onClose: oo,
-    markAsViewed: m,
-    externalAd: b
-  } = h, p = o.type === f.INGAME_IAB11_LBAR || o.type === f.INGAME_IAB11 || o.type === f.INGAME_IAB11_SIDEBAR, c = ((v = o.sponsor) == null ? void 0 : v.logo) && o.logoMode === s.CENTER, A = !!((B = (P = o.banner) == null ? void 0 : P.video) != null && B.url), i = o.autoPlayVideo === ro.ENABLED;
-  if (u(() => {
-    r == null || r(A || i), d == null || d();
-  }, []), u(() => {
-    l && o.type && m && m();
-  }, [l, o.type, m]), u(() => () => {
-    n == null || n({ muted: !1 });
-  }, [n]), b)
-    return /* @__PURE__ */ e(lo, { ...h, externalAd: b });
-  let a = (N = o.banner) == null ? void 0 : N.url;
-  a && a.indexOf("http") !== 0 && (a = `https://${a}`);
-  let y = !0;
-  return A && (!Y || !i ? y = !0 : y = !1), /* @__PURE__ */ t(io, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t(so, { children: [
-        /* @__PURE__ */ t(mo, { className: K(!c && po), children: [
-          ((T = o.sponsor) == null ? void 0 : T.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(Q, { className: "PromoSponsorLogo", src: (x = o.sponsor) == null ? void 0 : x.logo, alt: "promo" }),
-          /* @__PURE__ */ t(
-            co,
+    open: c,
+    advertisementPaused: ao,
+    togglePause: n,
+    controlVideo: p,
+    skipAutoClose: ro,
+    promotionId: r,
+    onClose: no,
+    markAsViewed: u,
+    externalAd: B,
+    isEventFired: e,
+    fireEvent: t,
+    muted: lo
+  } = M, h = o.type === P.INGAME_IAB11_LBAR || o.type === P.INGAME_IAB11 || o.type === P.INGAME_IAB11_SIDEBAR, b = ((C = o.sponsor) == null ? void 0 : C.logo) && o.logoMode === y.CENTER, N = !!((x = (T = o.banner) == null ? void 0 : T.video) != null && x.url), s = o.autoPlayVideo === po.ENABLED, io = o.playVideoMuted === mo.ENABLED;
+  if (A(() => {
+    n == null || n(N || s), c == null || c();
+  }, []), A(() => {
+    r && o.type && u && u();
+  }, [r, o.type, u]), A(() => () => {
+    p == null || p({ muted: !1 });
+  }, [p]), B)
+    return /* @__PURE__ */ a(uo, { ...M, externalAd: B });
+  let m = (g = o.banner) == null ? void 0 : g.url;
+  m && m.indexOf("http") !== 0 && (m = `https://${m}`);
+  let f = !0;
+  return N && (!ao || !s ? f = !0 : f = !1), /* @__PURE__ */ l(ho, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ l("div", { children: [
+      /* @__PURE__ */ l(bo, { children: [
+        /* @__PURE__ */ l(fo, { className: oo(!b && Ao), children: [
+          ((I = o.sponsor) == null ? void 0 : I.logo) && o.logoMode === y.LEFT && /* @__PURE__ */ a(eo, { className: "PromoSponsorLogo", src: (S = o.sponsor) == null ? void 0 : S.logo, alt: "promo" }),
+          /* @__PURE__ */ l(
+            Po,
             {
               style: {
-                paddingLeft: (C = o.sponsor) != null && C.logo && o.logoMode === s.LEFT ? "0px" : "8px"
+                paddingLeft: (L = o.sponsor) != null && L.logo && o.logoMode === y.LEFT ? "0px" : "8px"
               },
               children: [
-                ((E = o.sponsor) == null ? void 0 : E.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(yo, { children: (g = o.sponsor) == null ? void 0 : g.name }),
-                /* @__PURE__ */ t(uo, { className: "SponsorText", children: [
-                  /* @__PURE__ */ e(fo, { children: "AD" }),
-                  /* @__PURE__ */ e(ho, { children: "SPONSORED" })
+                ((R = o.sponsor) == null ? void 0 : R.logo) && o.logoMode === y.LEFT && /* @__PURE__ */ a(Mo, { children: (O = o.sponsor) == null ? void 0 : O.name }),
+                /* @__PURE__ */ l(Bo, { className: "SponsorText", children: [
+                  /* @__PURE__ */ a(No, { children: "AD" }),
+                  /* @__PURE__ */ a(Co, { children: "SPONSORED" })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ e(
-          no,
+        /* @__PURE__ */ a(
+          yo,
           {
             className: "ClosePromoIcon",
-            close: oo,
-            autoClose: (I = o.closeTimer) == null ? void 0 : I.auto,
-            duration: Z ? 0 : (S = o.closeTimer) == null ? void 0 : S.seconds,
-            isPlaying: y
+            close: no,
+            autoClose: (D = o.closeTimer) == null ? void 0 : D.auto,
+            duration: ro ? 0 : (V = o.closeTimer) == null ? void 0 : V.seconds,
+            isPlaying: f
           }
         )
       ] }),
-      /* @__PURE__ */ t(bo, { children: [
-        c && /* @__PURE__ */ e(Q, { className: Ao, src: (M = o.sponsor) == null ? void 0 : M.logo, alt: "promo" }),
-        /* @__PURE__ */ e(X, { children: (O = (L = o.banner) == null ? void 0 : L.video) != null && O.url ? /* @__PURE__ */ e(
-          ao,
+      /* @__PURE__ */ l(To, { children: [
+        b && /* @__PURE__ */ a(eo, { className: xo, src: (_ = o.sponsor) == null ? void 0 : _.logo, alt: "promo" }),
+        /* @__PURE__ */ a(to, { children: (k = (U = o.banner) == null ? void 0 : U.video) != null && k.url ? /* @__PURE__ */ a(
+          co,
           {
-            source: (R = (D = o.banner) == null ? void 0 : D.video) == null ? void 0 : R.url,
-            poster: (k = (_ = o.banner) == null ? void 0 : _.video) == null ? void 0 : k.thumbnailUrl,
-            aspectRatio: p ? "1/1" : "2/1",
+            source: (G = (v = o.banner) == null ? void 0 : v.video) == null ? void 0 : G.url,
+            poster: (j = ($ = o.banner) == null ? void 0 : $.video) == null ? void 0 : j.thumbnailUrl,
+            aspectRatio: h ? "1/1" : "2/1",
+            onRender: () => {
+              e != null && e("video-rendered") || (d.emit("advertisement", {
+                action: "videoRendered",
+                payload: {
+                  id: r,
+                  type: o.type
+                }
+              }), t == null || t("video-rendered"));
+            },
+            onQuartile: (i) => {
+              e != null && e(`video-quartile-${i}`) || (d.emit("advertisement", {
+                action: "quartileCompleted",
+                payload: {
+                  id: r,
+                  type: o.type,
+                  quartile: i
+                }
+              }), t == null || t(`video-quartile-${i}`));
+            },
+            onMute: (i) => {
+              const F = i ? "muted" : "unmuted";
+              e != null && e(F) || (d.emit("advertisement", {
+                action: i ? "videoMuted" : "videoUnmuted",
+                payload: {
+                  id: r,
+                  type: o.type
+                }
+              }), t == null || t(F));
+            },
             onPause: () => {
-              i && (r == null || r(!0));
+              s && (n == null || n(!0));
+            },
+            onReplay: () => {
+              e != null && e("replayed") || (d.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: r,
+                  type: o.type
+                }
+              }), t == null || t("replayed"));
             },
             onPlay: () => {
-              eo.emit("advertisement", {
+              e != null && e("played") || (d.emit("advertisement", {
                 action: "videoPlay",
                 payload: {
-                  id: l,
+                  id: r,
+                  type: o.type
+                }
+              }), t == null || t("played")), n == null || n(!1), e != null && e("played") && (e != null && e("ended")) && !(e != null && e("replayed")) && (d.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: r,
+                  type: o.type
+                }
+              }), t == null || t("replayed"));
+            },
+            onEnd: () => {
+              e != null && e("ended") || (d.emit("advertisement", {
+                action: "videoEnd",
+                payload: {
+                  id: r,
                   type: o.type
                 }
-              }), r == null || r(!1);
+              }), t == null || t("ended"));
             },
-            controlVideo: n,
-            autoPlay: i
+            controlVideo: p,
+            autoPlay: s,
+            playMuted: io,
+            muted: lo
           }
-        ) : (F = o.banner) != null && F.imageUrl ? /* @__PURE__ */ e(vo, { style: p ? { aspectRatio: "1/1" } : {}, src: (U = o.banner) == null ? void 0 : U.imageUrl, alt: "promo" }) : null }),
-        !p && /* @__PURE__ */ t(X, { children: [
-          ((V = o.banner) == null ? void 0 : V.title) && /* @__PURE__ */ e(Po, { className: K("AdvTitle", c && Bo), children: (G = o.banner) == null ? void 0 : G.title }),
-          ((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ e(No, { className: "AdvDescription", children: (H = o.banner) == null ? void 0 : H.body })
+        ) : (H = o.banner) != null && H.imageUrl ? /* @__PURE__ */ a(go, { style: h ? { aspectRatio: "1/1" } : {}, src: (q = o.banner) == null ? void 0 : q.imageUrl, alt: "promo" }) : null }),
+        !h && /* @__PURE__ */ l(to, { children: [
+          ((w = o.banner) == null ? void 0 : w.title) && /* @__PURE__ */ a(Io, { className: oo("AdvTitle", b && So), children: (Q = o.banner) == null ? void 0 : Q.title }),
+          ((W = o.banner) == null ? void 0 : W.body) && /* @__PURE__ */ a(Lo, { className: "AdvDescription", children: (z = o.banner) == null ? void 0 : z.body })
         ] })
       ] })
     ] }),
-    o.buttonType === to.BASIC && /* @__PURE__ */ e(To, { children: /* @__PURE__ */ e(
-      xo,
+    o.buttonType === so.BASIC && /* @__PURE__ */ a(Ro, { children: /* @__PURE__ */ a(
+      Oo,
       {
-        href: a,
+        href: m,
         style: {
-          backgroundColor: ((W = (w = o.banner) == null ? void 0 : w.ctaButton) == null ? void 0 : W.color) || "#009dc4",
-          color: ((q = ($ = o.banner) == null ? void 0 : $.ctaButton) == null ? void 0 : q.textColor) || "#fff"
+          backgroundColor: ((K = (J = o.banner) == null ? void 0 : J.ctaButton) == null ? void 0 : K.color) || "#009dc4",
+          color: ((Y = (X = o.banner) == null ? void 0 : X.ctaButton) == null ? void 0 : Y.textColor) || "#fff"
         },
         "data-a": "button",
-        "data-promo-id": l,
+        "data-promo-id": r,
         "data-promo-type": o.type,
         target: "_blank",
-        children: (J = (z = o.banner) == null ? void 0 : z.ctaButton) == null ? void 0 : J.label
+        children: (E = (Z = o.banner) == null ? void 0 : Z.ctaButton) == null ? void 0 : E.label
       }
     ) })
   ] });
 };
 export {
-  Ro as Overlay,
-  Fo as OverlayContainer
+  Ho as Overlay,
+  Qo as OverlayContainer
 };

package/lib/ui/gamification/detail/header/index.d.ts

@@ -4,6 +4,8 @@ interface VoteHeaderProps {
     close: () => void;
     label?: string;
     closeTimer?: CloseTimer;
+    mastersApp?: boolean;
+    webos?: boolean;
 }
 export declare const VoteHeader: React.FC<VoteHeaderProps>;
 export {};

package/lib/ui/gamification/detail/header/index.js

@@ -1,25 +1,28 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { QuestionType as e } from "@streamlayer/sdk-web-types";
-import { CloseButton as c } from "../../../close-btn/index.js";
-import { QuestionTypeData as p } from "../../constants.js";
-import { Container as s, QuestionTypeWrap as l, QuestionTypeIcon as m, QuestionTypeTitle as u, CloseIconWrap as C, CloseIcon as f } from "./styles.js";
-const b = ({ type: a, closeTimer: n, close: r, label: d }) => {
-  const o = a ? p[a] : { label: d, iconName: void 0 };
-  return /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ i(l, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ t(
-        m,
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { withFocusable as c } from "../../../../app/webos/useTvButton.js";
+import { QuestionType as r } from "@streamlayer/sdk-web-types";
+import { CloseButton as l } from "../../../close-btn/index.js";
+import { QuestionTypeData as m } from "../../constants.js";
+import { Container as u, QuestionTypeWrap as C, QuestionTypeIcon as I, QuestionTypeTitle as b, CloseIcon as f, CloseIconWrap as h } from "./styles.js";
+const Q = c(h, {}), y = ({ webos: d, type: t, closeTimer: n, close: e, label: s, mastersApp: p }) => {
+  const o = t ? m[t] : { label: s, iconName: void 0 };
+  return /* @__PURE__ */ i(u, { children: [
+    /* @__PURE__ */ i(C, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ a(
+        I,
         {
-          "data-type-trivia": a === e.TRIVIA,
-          "data-type-poll": a === e.POLL,
+          "data-type-trivia": t === r.TRIVIA,
+          "data-type-poll": t === r.POLL,
+          "data-type-prediction": t === r.PREDICTION,
+          "data-masters-app": !!p,
           name: o.iconName
         }
       ),
-      (o == null ? void 0 : o.label) && /* @__PURE__ */ t(u, { children: o.label })
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ a(b, { children: o.label })
     ] }),
-    n != null && n.seconds ? /* @__PURE__ */ t(c, { close: r, autoClose: n.auto, duration: n.seconds }) : /* @__PURE__ */ t(C, { "data-a": "intr", onClick: r, children: /* @__PURE__ */ t(f, { "data-a": "intr", name: "icon-cross" }) })
+    n != null && n.seconds ? /* @__PURE__ */ a(l, { close: e, autoClose: n.auto, duration: n.seconds }) : /* @__PURE__ */ a(Q, { webos: d, "data-a": "intr", onClick: e, type: "button", "data-close-btn": "true", children: /* @__PURE__ */ a(f, { "data-a": "intr", name: "icon-cross" }) })
   ] });
 };
 export {
-  b as VoteHeader
+  y as VoteHeader
 };

package/lib/ui/gamification/detail/header/styles.d.ts

@@ -1,6 +1,18 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionTypeWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionTypeIcon: any;
+export declare const QuestionTypeIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const QuestionTypeTitle: 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 CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const CloseIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;