@streamlayer/react 1.8.4 → 1.8.6

package/lib/es/advertisement.js

@@ -1,549 +1,719 @@
-import { jsx as s, jsxs as m, Fragment as io } from "react/jsx-runtime";
-import { useEffect as to, useRef as ao } from "react";
-import { f as C, s as n, c as ro, g as lo, X as co, h as M, a as Y, L as po, u as mo, i as uo, b as vo, S as b, d as Ao } from "./index2.js";
-import { N as h, a as Z, b as oo, C as so, c as no, P as g, d as $, A as Io, e as ho, S as go } from "./useStreamLayerApp2.js";
-const yo = /* @__PURE__ */ n("div")({
+import { jsx as e, jsxs as A, Fragment as ro } from "react/jsx-runtime";
+import { useRef as j, useState as L, useCallback as Eo, useEffect as B } from "react";
+import { e as S, s as n, h as So, g as lo, i as x, Y as ko, a as co, L as Lo, u as Mo, j as Oo, b as Po, S as T, d as _o } from "./index2.js";
+import { N, a as po, b as mo, C as uo, c as Ao, P as M, d as E, A as Bo, e as xo, S as Ro } from "./useStreamLayerApp2.js";
+const Do = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "c5b6wdg",
   propsAsIs: !1
-}), bo = "a1rlj479", fo = "s35f1di", No = "sj4471g", $o = "b12050d8", Co = "b1d5ybek", To = (o) => o === "left" || o === "right" ? fo : $o, So = (o) => o === "left" || o === "right" ? No : Co, ko = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", L = ({
+}), qo = "a1rlj479", wo = "s35f1di", Vo = "sj4471g", jo = "b12050d8", Uo = "b1d5ybek", Fo = (o) => o === "left" || o === "right" ? wo : jo, zo = (o) => o === "left" || o === "right" ? Vo : Uo, Go = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", U = ({
   children: o,
-  style: e,
+  style: s,
   className: i,
-  enabled: r = !0,
+  enabled: t = !0,
   hiding: l,
-  direction: a = "left",
-  onAnimationEnd: d
-}) => /* @__PURE__ */ s(yo, {
-  style: e,
-  className: C(i, bo, ko(a), r && !l && To(a), r && l && So(a)),
-  onAnimationEnd: d,
+  direction: r = "left",
+  onAnimationEnd: c
+}) => /* @__PURE__ */ e(Do, {
+  style: s,
+  className: S(i, qo, Go(r), t && !l && Fo(r), t && l && zo(r)),
+  onAnimationEnd: c,
   children: o
-}), Mo = /* @__PURE__ */ n("a")({
+}), Wo = /* @__PURE__ */ n("a")({
   name: "Link",
   class: "l1sgte8c",
   propsAsIs: !1
-}), Lo = /* @__PURE__ */ n("div")({
+}), Ho = /* @__PURE__ */ n("div")({
   name: "BannerContainer",
   class: "b7yfc72",
   propsAsIs: !1
-}), Oo = () => Mo, Bo = /* @__PURE__ */ n(Oo())({
+}), Ko = () => Wo, Yo = /* @__PURE__ */ n(Ko())({
   name: "BannerLink",
   class: "bejjq94",
   propsAsIs: !0
-}), Eo = ({ promotion: o, promotionId: e, hiding: i, direction: r = "bottom" }) => {
-  var l, a;
+}), Jo = ({ promotion: o, promotionId: s, hiding: i, direction: t = "bottom" }) => {
+  var l, r;
   if (!((l = o.additionalBanner) != null && l.imageUrl))
     return null;
-  let d = (a = o.banner) == null ? void 0 : a.url;
-  return d && d.indexOf("http") !== 0 && (d = `https://${d}`), /* @__PURE__ */ s(L, { direction: r, hiding: i, children: /* @__PURE__ */ s(Lo, { className: "BannerContainer", children: /* @__PURE__ */ s(
-    Bo,
+  let c = (r = o.banner) == null ? void 0 : r.url;
+  return c && c.indexOf("http") !== 0 && (c = `https://${c}`), /* @__PURE__ */ e(U, { direction: t, hiding: i, children: /* @__PURE__ */ e(Ho, { className: "BannerContainer", children: /* @__PURE__ */ e(
+    Yo,
     {
       className: "BannerLink",
-      href: d,
+      href: c,
       style: { backgroundImage: `url(${o.additionalBanner.imageUrl})` },
-      "data-promo-id": e,
+      "data-promo-id": s,
       "data-promo-type": o.type,
       "data-analytics": "banner",
       target: "_blank"
     }
   ) }) });
-}, _o = /* @__PURE__ */ n("div")({
+}, Qo = /* @__PURE__ */ n("div")({
   name: "NotificationContent",
   class: "n18wsqoo",
   propsAsIs: !1
-}), Po = /* @__PURE__ */ n("div")({
+}), Xo = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1ia90c2",
   propsAsIs: !1
-}), xo = /* @__PURE__ */ n("div")({
+}), Zo = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "tg2z08v",
   propsAsIs: !1
-}), Ro = /* @__PURE__ */ n("div")({
+}), oe = /* @__PURE__ */ n("div")({
   name: "Text",
   class: "t59zdk1",
   propsAsIs: !1
-}), O = /* @__PURE__ */ n("div")({
+}), F = /* @__PURE__ */ n("div")({
   name: "MediaImgBottom",
   class: "m1ab9fq",
   propsAsIs: !1
-}), Do = () => O, qo = /* @__PURE__ */ n(Do())({
+}), ee = () => F, ne = /* @__PURE__ */ n(ee())({
   name: "MediaImgMiddle",
   class: "m9fsr0y",
   propsAsIs: !0
-}), wo = /* @__PURE__ */ n("img")({
+}), se = /* @__PURE__ */ n("img")({
   name: "CtaIcon",
   class: "cvi9y5q",
   propsAsIs: !1
-}), jo = /* @__PURE__ */ n("button")({
+}), te = /* @__PURE__ */ n("button")({
   name: "Button",
   class: "bgl6boa",
   propsAsIs: !1
-}), Fo = /* @__PURE__ */ n("div")({
+}), ie = /* @__PURE__ */ n("div")({
   name: "Logo",
   class: "l5mq0z",
   propsAsIs: !1
-}), Uo = /* @__PURE__ */ n("div")({
+}), ae = /* @__PURE__ */ n("div")({
   name: "Footer",
   class: "f1mse0ft",
   propsAsIs: !1
-}), zo = /* @__PURE__ */ n("div")({
+}), re = /* @__PURE__ */ n("div")({
   name: "Vector",
   class: "v1hcloah",
   propsAsIs: !1
-}), Vo = /* @__PURE__ */ n("div")({
+}), le = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "n3n65jf",
   propsAsIs: !1
-}), Go = {
-  [h.BOTTOM]: O,
-  [h.MIDDLE]: qo
-}, Wo = ({ src: o, imagePosition: e }) => {
-  const i = Go[e] || O;
-  return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ s("img", { src: o, alt: "" }) });
-}, Ho = ({ notification: o, open: e }) => {
-  if (!o || !o.promotion || o.enabled !== Z.NOTIFICATION_ENABLED)
+}), de = {
+  [N.BOTTOM]: F,
+  [N.MIDDLE]: ne
+}, ce = ({ src: o, imagePosition: s }) => {
+  const i = de[s] || F;
+  return /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("img", { src: o, alt: "" }) });
+}, pe = ({ notification: o, open: s }) => {
+  if (!o || !o.promotion || o.enabled !== po.NOTIFICATION_ENABLED)
     return null;
-  const { title: i, body: r, image: l, promotion: a } = o, { sponsorLogo: d, sponsorLogoMode: c, imagePosition: u, ctaButton: t } = a;
-  return /* @__PURE__ */ m(Vo, { className: "SL_Lower_Third_Notification", onClick: e, children: [
-    /* @__PURE__ */ m(_o, { children: [
-      /* @__PURE__ */ s(Wo, { src: l, imagePosition: u }),
-      /* @__PURE__ */ m(Po, { children: [
-        i && /* @__PURE__ */ s(xo, { children: i }),
-        r && /* @__PURE__ */ s(Ro, { children: r })
+  const { title: i, body: t, image: l, promotion: r } = o, { sponsorLogo: c, sponsorLogoMode: p, imagePosition: v, ctaButton: a } = r;
+  return /* @__PURE__ */ A(le, { className: "SL_Lower_Third_Notification", onClick: s, children: [
+    /* @__PURE__ */ A(Qo, { children: [
+      /* @__PURE__ */ e(ce, { src: l, imagePosition: v }),
+      /* @__PURE__ */ A(Xo, { children: [
+        i && /* @__PURE__ */ e(Zo, { children: i }),
+        t && /* @__PURE__ */ e(oe, { children: t })
       ] })
     ] }),
-    /* @__PURE__ */ m(Uo, { children: [
-      c !== oo.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ m(io, { children: [
-        /* @__PURE__ */ s(Fo, { children: /* @__PURE__ */ s("img", { src: d, alt: i }) }),
-        /* @__PURE__ */ s(zo, {})
+    /* @__PURE__ */ A(ae, { children: [
+      p !== mo.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ A(ro, { children: [
+        /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e("img", { src: c, alt: i }) }),
+        /* @__PURE__ */ e(re, {})
       ] }),
-      /* @__PURE__ */ m(jo, { name: "promo-button", style: { color: t == null ? void 0 : t.textColor, backgroundColor: t == null ? void 0 : t.color }, children: [
-        (t == null ? void 0 : t.ctaIcon) && (t == null ? void 0 : t.ctaIconMode) === so.CTA_ICON_TRANSPARENT && /* @__PURE__ */ s(wo, { src: t == null ? void 0 : t.ctaIcon, alt: "cta-icon" }),
-        (t == null ? void 0 : t.label) || "Open"
+      /* @__PURE__ */ A(te, { name: "promo-button", style: { color: a == null ? void 0 : a.textColor, backgroundColor: a == null ? void 0 : a.color }, children: [
+        (a == null ? void 0 : a.ctaIcon) && (a == null ? void 0 : a.ctaIconMode) === uo.CTA_ICON_TRANSPARENT && /* @__PURE__ */ e(se, { src: a == null ? void 0 : a.ctaIcon, alt: "cta-icon" }),
+        (a == null ? void 0 : a.label) || "Open"
       ] })
     ] })
   ] });
-}, Ko = /* @__PURE__ */ n("div")({
+}, me = /* @__PURE__ */ n("div")({
   name: "NotificationContent",
   class: "n1ku6hz",
   propsAsIs: !1
-}), Xo = /* @__PURE__ */ n("div")({
+}), ue = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "nbxqmol",
   propsAsIs: !1
-}), Jo = /* @__PURE__ */ n("div")({
+}), Ae = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1gu3eml",
   propsAsIs: !1
-}), Qo = /* @__PURE__ */ n("div")({
+}), ve = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t1u17zva",
   propsAsIs: !1
-}), Yo = /* @__PURE__ */ n("div")({
+}), he = /* @__PURE__ */ n("div")({
   name: "Text",
   class: "t10ko1g",
   propsAsIs: !1
-}), T = /* @__PURE__ */ n("div")({
+}), R = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "mntc42e",
   propsAsIs: !1
-}), Zo = () => T, K = /* @__PURE__ */ n(Zo())({
+}), Ie = () => R, no = /* @__PURE__ */ n(Ie())({
   name: "MediaImgFit",
   class: "ml060eo",
   propsAsIs: !0
-}), os = () => T, eo = /* @__PURE__ */ n(os())({
+}), ge = () => R, vo = /* @__PURE__ */ n(ge())({
   name: "MediaImgCentered",
   class: "m1vqlvig",
   propsAsIs: !0
-}), ss = () => eo, ns = /* @__PURE__ */ n(ss())({
+}), ye = () => vo, be = /* @__PURE__ */ n(ye())({
   name: "MediaImgBottom",
   class: "m1e7tvi5",
   propsAsIs: !0
-}), es = () => T, is = /* @__PURE__ */ n(es())({
+}), fe = () => R, Ne = /* @__PURE__ */ n(fe())({
   name: "MediaImgSolid",
   class: "mqvntt2",
   propsAsIs: !0
-}), ts = () => T, as = /* @__PURE__ */ n(ts())({
+}), $e = () => R, Ce = /* @__PURE__ */ n($e())({
   name: "MediaImgMiddle",
   class: "m12jtj3u",
   propsAsIs: !0
-}), rs = /* @__PURE__ */ n("img")({
+}), Te = /* @__PURE__ */ n("img")({
   name: "CtaIcon",
   class: "ckq1frv",
   propsAsIs: !1
-}), ls = /* @__PURE__ */ n("button")({
+}), Ee = /* @__PURE__ */ n("button")({
   name: "Button",
   class: "bis90pl",
   propsAsIs: !1
-}), ds = () => ro, cs = /* @__PURE__ */ n(ds())({
+}), Se = () => So, ke = /* @__PURE__ */ n(Se())({
   name: "StyledChevronRight",
   class: "s9mjmz3",
   propsAsIs: !0
-}), ps = /* @__PURE__ */ n("div")({
+}), Le = /* @__PURE__ */ n("div")({
   name: "Logo",
   class: "l1cf50a7",
   propsAsIs: !1
-}), ms = {
-  [h.UNSET]: K,
-  [h.FIT]: K,
-  [h.CENTERED]: eo,
-  [h.BOTTOM]: ns,
-  [h.SOLID]: is,
-  [h.MIDDLE]: as
-}, us = ({ src: o, imagePosition: e }) => {
-  const i = ms[e];
-  return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ s("img", { src: o, alt: "" }) });
-}, vs = ({ notification: o, open: e, promotionId: i, hiding: r, direction: l = "left" }) => {
-  if (!o || !o.promotion || o.enabled !== Z.NOTIFICATION_ENABLED)
+}), Me = {
+  [N.UNSET]: no,
+  [N.FIT]: no,
+  [N.CENTERED]: vo,
+  [N.BOTTOM]: be,
+  [N.SOLID]: Ne,
+  [N.MIDDLE]: Ce
+}, Oe = ({ src: o, imagePosition: s }) => {
+  const i = Me[s];
+  return /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("img", { src: o, alt: "" }) });
+}, Pe = ({ notification: o, open: s, promotionId: i, hiding: t, direction: l = "left" }) => {
+  if (!o || !o.promotion || o.enabled !== po.NOTIFICATION_ENABLED)
     return null;
-  if (o.promotion.mode === no.LOWER_THIRD)
-    return /* @__PURE__ */ s(Ho, { notification: o, open: e });
-  const { title: a, body: d, image: c, promotion: u } = o, { sponsorLogo: t, sponsorLogoMode: v, imagePosition: I, ctaButton: p } = u;
-  return /* @__PURE__ */ s(L, { className: "SL_Rich_Notification", direction: l, hiding: r, children: /* @__PURE__ */ m(Xo, { onClick: e, children: [
-    v !== oo.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ s(ps, { children: /* @__PURE__ */ s("img", { src: t, alt: a }) }),
-    /* @__PURE__ */ m(Ko, { children: [
-      /* @__PURE__ */ s(us, { src: c, imagePosition: I }),
-      /* @__PURE__ */ m(Jo, { children: [
-        a && /* @__PURE__ */ s(Qo, { children: a }),
-        d && /* @__PURE__ */ s(Yo, { children: d })
+  if (o.promotion.mode === Ao.LOWER_THIRD)
+    return /* @__PURE__ */ e(pe, { notification: o, open: s });
+  const { title: r, body: c, image: p, promotion: v } = o, { sponsorLogo: a, sponsorLogoMode: h, imagePosition: u, ctaButton: m } = v;
+  return /* @__PURE__ */ e(U, { className: "SL_Rich_Notification", direction: l, hiding: t, children: /* @__PURE__ */ A(ue, { onClick: s, children: [
+    h !== mo.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e("img", { src: a, alt: r }) }),
+    /* @__PURE__ */ A(me, { children: [
+      /* @__PURE__ */ e(Oe, { src: p, imagePosition: u }),
+      /* @__PURE__ */ A(Ae, { children: [
+        r && /* @__PURE__ */ e(ve, { children: r }),
+        c && /* @__PURE__ */ e(he, { children: c })
       ] }),
-      /* @__PURE__ */ m(ls, { name: "promo-button", style: { color: p == null ? void 0 : p.textColor, backgroundColor: p == null ? void 0 : p.color }, children: [
-        (p == null ? void 0 : p.ctaIcon) && (p == null ? void 0 : p.ctaIconMode) === so.CTA_ICON_TRANSPARENT && /* @__PURE__ */ s(rs, { src: p == null ? void 0 : p.ctaIcon, alt: "cta-icon" }),
-        (p == null ? void 0 : p.label) || "Open"
+      /* @__PURE__ */ A(Ee, { name: "promo-button", style: { color: m == null ? void 0 : m.textColor, backgroundColor: m == null ? void 0 : m.color }, children: [
+        (m == null ? void 0 : m.ctaIcon) && (m == null ? void 0 : m.ctaIconMode) === uo.CTA_ICON_TRANSPARENT && /* @__PURE__ */ e(Te, { src: m == null ? void 0 : m.ctaIcon, alt: "cta-icon" }),
+        (m == null ? void 0 : m.label) || "Open"
       ] }),
-      /* @__PURE__ */ s(cs, { name: "chevronRight" })
+      /* @__PURE__ */ e(ke, { name: "chevronRight" })
     ] })
   ] }) });
-}, As = /* @__PURE__ */ n("div")({
+}, _e = /* @__PURE__ */ n("div")({
   name: "OverlayContainer",
   class: "okzhq2w",
   propsAsIs: !1
-}), Is = /* @__PURE__ */ n("div")({
+}), ho = /* @__PURE__ */ n("div")({
   name: "PromoOverlay",
   class: "pmgz5i",
   propsAsIs: !1
-}), hs = /* @__PURE__ */ n("div")({
+}), Io = /* @__PURE__ */ n("div")({
   name: "Header",
   class: "hyxi3jt",
   propsAsIs: !1
-}), gs = /* @__PURE__ */ n("div")({
+}), go = /* @__PURE__ */ n("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), ys = "h10toh7", X = /* @__PURE__ */ n("img")({
+}), yo = "h10toh7", so = /* @__PURE__ */ n("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), bs = /* @__PURE__ */ n("div")({
+}), Be = /* @__PURE__ */ n("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
-}), fs = /* @__PURE__ */ n("div")({
+}), bo = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "m1crmu01",
   propsAsIs: !1
-}), Ns = /* @__PURE__ */ n("img")({
+}), xe = /* @__PURE__ */ n("img")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), $s = "s1nmch9k", J = /* @__PURE__ */ n("div")({
+}), Re = "s1nmch9k", to = /* @__PURE__ */ n("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
-}), Cs = /* @__PURE__ */ n("div")({
+}), De = /* @__PURE__ */ n("div")({
   name: "Description",
   class: "dydopmr",
   propsAsIs: !1
-}), Ts = /* @__PURE__ */ n("div")({
+}), qe = /* @__PURE__ */ n("div")({
   name: "Sponsor",
   class: "s1w6nt04",
   propsAsIs: !1
-}), Ss = /* @__PURE__ */ n("div")({
+}), we = /* @__PURE__ */ n("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), ks = /* @__PURE__ */ n("div")({
+}), fo = /* @__PURE__ */ n("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), Ms = /* @__PURE__ */ n("span")({
+}), Ve = /* @__PURE__ */ n("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), Ls = /* @__PURE__ */ n("div")({
+}), je = /* @__PURE__ */ n("div")({
   name: "ActionBtnWrap",
   class: "a8d4xfk",
   propsAsIs: !1
-}), Os = /* @__PURE__ */ n("a")({
+}), Ue = /* @__PURE__ */ n("a")({
   name: "ActionButton",
   class: "at6oobh",
   propsAsIs: !1
-}), Bs = /* @__PURE__ */ n("div")({
+}), Fe = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t1gyg7tt",
   propsAsIs: !1
-}), Es = "h17rwbtk", Q = ({ promotion: o, skipAutoClose: e, promotionId: i, onClose: r, markAsViewed: l }) => {
-  var a, d, c, u, t, v, I, p, A, f, N, B, E, _, P, x, R, D, q, w, j, F, U, z, V, G, W, H;
-  const S = o.type === g.INGAME_IAB11_LBAR || o.type === g.INGAME_IAB11, k = ((a = o.sponsor) == null ? void 0 : a.logo) && o.logoMode === $.CENTER;
-  to(() => {
-    i && o.type && l && l();
-  }, [i, o.type, l]);
-  let y = (d = o.banner) == null ? void 0 : d.url;
-  return y && y.indexOf("http") !== 0 && (y = `https://${y}`), /* @__PURE__ */ m(Is, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ m(hs, { children: [
-      /* @__PURE__ */ m(gs, { className: C(!k && ys), children: [
-        ((c = o.sponsor) == null ? void 0 : c.logo) && o.logoMode === $.LEFT && /* @__PURE__ */ s(X, { src: (u = o.sponsor) == null ? void 0 : u.logo, alt: "promo" }),
-        /* @__PURE__ */ m(
-          Ts,
+}), ze = "h17rwbtk", Ge = /* @__PURE__ */ n("div")({
+  name: "Container",
+  class: "c10m2bce",
+  propsAsIs: !1
+}), io = /* @__PURE__ */ n("div")({
+  name: "Item",
+  class: "ig23yq5",
+  propsAsIs: !1
+}), We = /* @__PURE__ */ n("div")({
+  name: "Dot",
+  class: "d1f6aqua",
+  propsAsIs: !1
+}), He = ({
+  time: o,
+  adCount: s,
+  adPosition: i
+}) => {
+  const t = Math.floor(o / 60), l = o - t * 60;
+  return t === 0 && l === 0 && s === i ? null : /* @__PURE__ */ A(Ge, {
+    children: [s > 1 && /* @__PURE__ */ A(ro, {
+      children: [/* @__PURE__ */ A(io, {
+        children: [i, " of ", s]
+      }), /* @__PURE__ */ e(We, {})]
+    }), /* @__PURE__ */ A(io, {
+      children: [t, ":", l < 10 ? `0${l}` : l]
+    })]
+  });
+}, Ke = (o, s, { onPlay: i, onStop: t, onProgress: l }) => {
+  const r = google.ima;
+  let c = new r.AdDisplayContainer(o), p = new r.AdsLoader(c), v = new r.AdsRequest(), a;
+  p.addEventListener(
+    r.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+    (u) => {
+      a = u.getAdsManager(o), i && a.addEventListener(r.AdEvent.Type.STARTED, i), t && a.addEventListener(r.AdEvent.Type.COMPLETE, t), l && a.addEventListener(r.AdEvent.Type.AD_PROGRESS, (m) => l(m.getAdData())), a.init(o.clientWidth, o.clientHeight, r.ViewMode.NORMAL), a.start();
+    },
+    !1
+  ), p.addEventListener(
+    r.AdErrorEvent.Type.AD_ERROR,
+    () => {
+      console.log("ad error"), t == null || t();
+    },
+    !1
+  ), v.linearAdSlotWidth = o.clientWidth, v.linearAdSlotHeight = o.clientHeight, v.adTagUrl = s, p.requestAds(v);
+  const h = () => {
+    a == null || a.destroy(), p == null || p.destroy(), c == null || c.destroy(), c = void 0, p = void 0, v = void 0, a = void 0;
+  };
+  return () => {
+    try {
+      c.initialize();
+    } catch (u) {
+      t == null || t(), console.log("AdsManager could not be started", u);
+    }
+    return h;
+  };
+}, Ye = /* @__PURE__ */ n("div")({
+  name: "Container",
+  class: "c4q6dw1",
+  propsAsIs: !1
+}), Je = /* @__PURE__ */ n("div")({
+  name: "ControlsContainer",
+  class: "c1la67r",
+  propsAsIs: !1
+}), Qe = "m3guev", Xe = "m7099mt", Ze = "mmm6o5s", on = ({
+  promotion: o,
+  controlVideo: s,
+  promotionId: i,
+  onClose: t,
+  externalAd: l,
+  skipAutoClose: r
+}) => {
+  var c;
+  const p = j(null), [v, a] = L(!1), [h, u] = L(0), [m, b] = L(0), [$, I] = L(0), g = j(), y = Eo(() => {
+    u(0), b(0), I(0), a(!1), s == null || s({
+      muted: !1
+    });
+  }, [s]);
+  B(() => {
+    if (l != null && l.url && p.current) {
+      y();
+      const f = Ke(p.current, l.url, {
+        onPlay: () => {
+          x.emit("advertisement", {
+            action: "videoPlay",
+            payload: {
+              id: i,
+              type: o.type
+            }
+          }), s == null || s({
+            muted: !0
+          }), a(!0);
+        },
+        onStop: () => {
+          t == null || t(), y();
+        },
+        onProgress: (C) => {
+          u(Math.round(C.duration - C.currentTime)), b(C.totalAds), I(C.adPosition);
+        }
+      })();
+      return g.current = f, () => {
+        g.current = void 0, f();
+      };
+    }
+  }, [l == null ? void 0 : l.url, s, y, i, o.type, t]);
+  const O = ((c = o.sponsor) == null ? void 0 : c.logo) && o.logoMode === M.CENTER;
+  return /* @__PURE__ */ A(ho, {
+    className: "PromoOverlay",
+    children: [/* @__PURE__ */ A(Io, {
+      children: [/* @__PURE__ */ e(go, {
+        className: S(!O && yo),
+        children: /* @__PURE__ */ e(fo, {
+          style: {
+            transform: "scale(1.5)"
+          },
+          children: "Ad"
+        })
+      }), /* @__PURE__ */ A(Je, {
+        children: [/* @__PURE__ */ e(He, {
+          time: h,
+          adCount: m,
+          adPosition: $
+        }), r && /* @__PURE__ */ e(lo, {
+          className: "ClosePromoIcon",
+          close: () => {
+            var f;
+            (f = g.current) == null || f.call(g), t == null || t(), y();
+          }
+        })]
+      })]
+    }), /* @__PURE__ */ e(bo, {
+      className: S(Qe, v && Xe, !v && Ze),
+      children: /* @__PURE__ */ e(Ye, {
+        ref: p
+      })
+    })]
+  });
+}, ao = (o) => {
+  var s, i, t, l, r, c, p, v, a, h, u, m, b, $, I, g, y, O, f, C, z, G, W, H, K, Y, J, Q, X, Z;
+  const { promotion: d, controlVideo: P, skipAutoClose: No, promotionId: _, onClose: $o, markAsViewed: D, externalAd: oo } = o, q = d.type === E.INGAME_IAB11_LBAR || d.type === E.INGAME_IAB11, w = ((s = d.sponsor) == null ? void 0 : s.logo) && d.logoMode === M.CENTER, Co = !!((t = (i = d.banner) == null ? void 0 : i.video) != null && t.url), V = d.autoPlayVideo === Bo.ENABLED, [To, eo] = L(!Co || !V);
+  if (B(() => {
+    _ && d.type && D && D();
+  }, [_, d.type, D]), B(() => () => {
+    P == null || P({ muted: !1 });
+  }, [P]), oo)
+    return /* @__PURE__ */ e(on, { ...o, externalAd: oo });
+  let k = (l = d.banner) == null ? void 0 : l.url;
+  return k && k.indexOf("http") !== 0 && (k = `https://${k}`), /* @__PURE__ */ A(ho, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ A(Io, { children: [
+      /* @__PURE__ */ A(go, { className: S(!w && yo), children: [
+        ((r = d.sponsor) == null ? void 0 : r.logo) && d.logoMode === M.LEFT && /* @__PURE__ */ e(so, { src: (c = d.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
+        /* @__PURE__ */ A(
+          qe,
           {
             style: {
-              paddingLeft: (t = o.sponsor) != null && t.logo && o.logoMode === $.LEFT ? "0px" : "8px"
+              paddingLeft: (p = d.sponsor) != null && p.logo && d.logoMode === M.LEFT ? "0px" : "8px"
             },
             children: [
-              ((v = o.sponsor) == null ? void 0 : v.logo) && o.logoMode === $.LEFT && /* @__PURE__ */ s(bs, { children: (I = o.sponsor) == null ? void 0 : I.name }),
-              /* @__PURE__ */ m(Ss, { className: "SponsorText", children: [
-                /* @__PURE__ */ s(ks, { children: "AD" }),
-                /* @__PURE__ */ s(Ms, { children: "SPONSORED" })
+              ((v = d.sponsor) == null ? void 0 : v.logo) && d.logoMode === M.LEFT && /* @__PURE__ */ e(Be, { children: (a = d.sponsor) == null ? void 0 : a.name }),
+              /* @__PURE__ */ A(we, { className: "SponsorText", children: [
+                /* @__PURE__ */ e(fo, { children: "AD" }),
+                /* @__PURE__ */ e(Ve, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ e(
         lo,
         {
           className: "ClosePromoIcon",
-          close: r,
-          autoClose: (p = o.closeTimer) == null ? void 0 : p.auto,
-          duration: e ? 0 : (A = o.closeTimer) == null ? void 0 : A.seconds
+          close: $o,
+          autoClose: (h = d.closeTimer) == null ? void 0 : h.auto,
+          duration: No ? 0 : (u = d.closeTimer) == null ? void 0 : u.seconds,
+          isPlaying: To
         }
       )
     ] }),
-    /* @__PURE__ */ m(fs, { children: [
-      k && /* @__PURE__ */ s(X, { className: $s, src: (f = o.sponsor) == null ? void 0 : f.logo, alt: "promo" }),
-      /* @__PURE__ */ s(J, { children: (B = (N = o.banner) == null ? void 0 : N.video) != null && B.url ? /* @__PURE__ */ s(
-        co,
+    /* @__PURE__ */ A(bo, { children: [
+      w && /* @__PURE__ */ e(so, { className: Re, src: (m = d.sponsor) == null ? void 0 : m.logo, alt: "promo" }),
+      /* @__PURE__ */ e(to, { children: ($ = (b = d.banner) == null ? void 0 : b.video) != null && $.url ? /* @__PURE__ */ e(
+        ko,
         {
-          source: (_ = (E = o.banner) == null ? void 0 : E.video) == null ? void 0 : _.url,
-          poster: (x = (P = o.banner) == null ? void 0 : P.video) == null ? void 0 : x.thumbnailUrl,
-          aspectRatio: S ? "1/1" : "16/9",
+          source: (g = (I = d.banner) == null ? void 0 : I.video) == null ? void 0 : g.url,
+          poster: (O = (y = d.banner) == null ? void 0 : y.video) == null ? void 0 : O.thumbnailUrl,
+          aspectRatio: q ? "1/1" : "16/9",
+          onPause: () => {
+            V && eo(!1);
+          },
           onPlay: () => {
-            M.emit("advertisement", {
+            x.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: i,
-                type: o.type
+                id: _,
+                type: d.type
               }
-            });
+            }), eo(!0);
           },
-          autoPlay: o.autoPlayVideo === Io.ENABLED
+          controlVideo: P,
+          autoPlay: V
         }
-      ) : (R = o.banner) != null && R.imageUrl ? /* @__PURE__ */ s(Ns, { style: S ? { aspectRatio: "1/1" } : {}, src: (D = o.banner) == null ? void 0 : D.imageUrl, alt: "promo" }) : null }),
-      !S && /* @__PURE__ */ m(J, { children: [
-        ((q = o.banner) == null ? void 0 : q.title) && /* @__PURE__ */ s(Bs, { className: C("AdvTitle", k && Es), children: (w = o.banner) == null ? void 0 : w.title }),
-        ((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ s(Cs, { className: "AdvDescription", children: (F = o.banner) == null ? void 0 : F.body })
+      ) : (f = d.banner) != null && f.imageUrl ? /* @__PURE__ */ e(xe, { style: q ? { aspectRatio: "1/1" } : {}, src: (C = d.banner) == null ? void 0 : C.imageUrl, alt: "promo" }) : null }),
+      !q && /* @__PURE__ */ A(to, { children: [
+        ((z = d.banner) == null ? void 0 : z.title) && /* @__PURE__ */ e(Fe, { className: S("AdvTitle", w && ze), children: (G = d.banner) == null ? void 0 : G.title }),
+        ((W = d.banner) == null ? void 0 : W.body) && /* @__PURE__ */ e(De, { className: "AdvDescription", children: (H = d.banner) == null ? void 0 : H.body })
       ] })
     ] }),
-    o.buttonType !== ho.NO_BUTTON && /* @__PURE__ */ s(Ls, { children: /* @__PURE__ */ s(
-      Os,
+    d.buttonType !== xo.NO_BUTTON && /* @__PURE__ */ e(je, { children: /* @__PURE__ */ e(
+      Ue,
       {
-        href: y,
+        href: k,
         style: {
-          backgroundColor: ((z = (U = o.banner) == null ? void 0 : U.ctaButton) == null ? void 0 : z.color) || "#009dc4",
-          color: ((G = (V = o.banner) == null ? void 0 : V.ctaButton) == null ? void 0 : G.textColor) || "#fff"
+          backgroundColor: ((Y = (K = d.banner) == null ? void 0 : K.ctaButton) == null ? void 0 : Y.color) || "#009dc4",
+          color: ((Q = (J = d.banner) == null ? void 0 : J.ctaButton) == null ? void 0 : Q.textColor) || "#fff"
         },
         "data-analytics": "button",
-        "data-promo-id": i,
-        "data-promo-type": o.type,
+        "data-promo-id": _,
+        "data-promo-type": d.type,
         target: "_blank",
-        children: (H = (W = o.banner) == null ? void 0 : W.ctaButton) == null ? void 0 : H.label
+        children: (Z = (X = d.banner) == null ? void 0 : X.ctaButton) == null ? void 0 : Z.label
       }
     ) })
   ] });
-}, _s = /* @__PURE__ */ n("div")({
+}, en = /* @__PURE__ */ n("div")({
   name: "SidebarContainer",
   class: "s1abskp8",
   propsAsIs: !1
-}), Ps = ({
+}), nn = ({
   children: o,
-  direction: e,
+  direction: s,
   style: i,
-  className: r,
+  className: t,
   hiding: l
-}) => /* @__PURE__ */ s(L, {
-  direction: e,
+}) => /* @__PURE__ */ e(U, {
+  direction: s,
   style: i,
   hiding: l,
-  className: r,
-  children: /* @__PURE__ */ s(_s, {
+  className: t,
+  children: /* @__PURE__ */ e(en, {
     children: o
   })
-}), xs = (o) => (o == null ? void 0 : o.type) === g.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === g.INGAME_IAB21_LBAR, Rs = (o) => (o == null ? void 0 : o.type) === g.INGAME_IAB11 || (o == null ? void 0 : o.type) === g.INGAME_IAB21, Ds = ({
+}), sn = (o) => (o == null ? void 0 : o.type) === E.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === E.INGAME_IAB21_LBAR, tn = (o) => (o == null ? void 0 : o.type) === E.INGAME_IAB11 || (o == null ? void 0 : o.type) === E.INGAME_IAB21, an = ({
   advertisement: o,
-  close: e,
+  close: s,
   skipTypeCheck: i,
-  skipAutoClose: r,
+  skipAutoClose: t,
   layoutMode: l = "side-by-side",
-  sidebar: a,
-  isNotification: d,
-  banner: c,
-  markAsViewed: u,
-  open: t
-}) => o.promotion ? d && o.notification ? /* @__PURE__ */ s(vs, { open: t, notification: o.notification, promotionId: o.question.id }) : !a && !c && (i || Rs(o.promotion)) ? /* @__PURE__ */ s(As, { className: "PromoOverlayContainer", children: /* @__PURE__ */ s(
-  Q,
+  sidebar: r,
+  isNotification: c,
+  banner: p,
+  markAsViewed: v,
+  open: a,
+  externalAd: h,
+  controlVideo: u
+}) => o.promotion ? c && o.notification ? /* @__PURE__ */ e(Pe, { open: a, notification: o.notification, promotionId: o.question.id }) : !r && !p && (i || tn(o.promotion)) ? /* @__PURE__ */ e(_e, { className: "PromoOverlayContainer", children: /* @__PURE__ */ e(
+  ao,
   {
-    markAsViewed: u,
+    markAsViewed: v,
     promotionId: o.question.id,
     promotion: o.promotion,
-    onClose: e,
-    skipAutoClose: r
+    onClose: s,
+    skipAutoClose: t,
+    externalAd: h,
+    controlVideo: u
   }
-) }) : a && (i || xs(o.promotion)) ? /* @__PURE__ */ s(Ps, { className: "PromoSidebarContainer", direction: a, hiding: !1, children: /* @__PURE__ */ s(
-  Q,
+) }) : r && (i || sn(o.promotion)) ? /* @__PURE__ */ e(nn, { className: "PromoSidebarContainer", direction: r, hiding: !1, children: /* @__PURE__ */ e(
+  ao,
   {
-    markAsViewed: u,
+    markAsViewed: v,
     promotionId: o.question.id,
     promotion: o.promotion,
-    onClose: e,
-    skipAutoClose: r
+    externalAd: h,
+    onClose: s,
+    controlVideo: u,
+    skipAutoClose: t
   }
-) }) : c ? /* @__PURE__ */ s(
-  Eo,
+) }) : p ? /* @__PURE__ */ e(
+  Jo,
   {
     promotionId: o.question.id,
     hiding: !1,
     promotion: o.promotion,
-    direction: c
+    direction: p
   }
-) : null : null, qs = /* @__PURE__ */ n("div")({
+) : null : null, rn = /* @__PURE__ */ n("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), ws = (o) => {
-  const e = o.target;
-  if (e instanceof HTMLAnchorElement && e.target === "_blank") {
-    const i = e.getAttribute("data-promo-id") || "", r = e.getAttribute("data-promo-type") || g.UNSET;
-    e.getAttribute("data-analytics") === "button" && M.emit("advertisement", {
+}), ln = (o) => {
+  const s = o.target;
+  if (s instanceof HTMLAnchorElement && s.target === "_blank") {
+    const i = s.getAttribute("data-promo-id") || "", t = s.getAttribute("data-promo-type") || E.UNSET;
+    s.getAttribute("data-analytics") === "button" && x.emit("advertisement", {
       action: "buttonSelect",
       payload: {
         id: i,
-        type: r
+        type: t
       }
-    }), e.getAttribute("data-analytics") === "banner" && M.emit("advertisement", {
+    }), s.getAttribute("data-analytics") === "banner" && x.emit("advertisement", {
       action: "bannerSelect",
       payload: {
         id: i,
-        type: r
+        type: t
       }
     });
   }
-}, js = ({
+}, dn = ({
   gamification: o,
-  layoutMode: e,
+  layoutMode: s,
   skipAutoClose: i,
-  skipTypeCheck: r,
+  skipTypeCheck: t,
   sidebar: l,
-  banner: a,
-  notification: d,
-  isMobileScreen: c,
-  persistent: u
+  banner: r,
+  notification: c,
+  isMobileScreen: p,
+  persistent: v,
+  externalAd: a,
+  controlVideo: h
 }) => {
-  var t, v, I;
-  const p = ao(null), A = Y(o.advertisement.$store);
-  po(p, {
-    enabled: !!A.data,
+  var u, m, b;
+  const $ = j(null), I = co(o.advertisement.$store);
+  Lo($, {
+    enabled: !!I.data,
     event: "click",
-    listener: ws
+    listener: ln
   });
-  const f = !a && !l;
-  if (A.data === void 0 || !u && A.isViewed)
+  const g = !r && !l;
+  if (I.data === void 0 || !v && I.isViewed)
     return null;
-  const N = ((I = (v = (t = A == null ? void 0 : A.data) == null ? void 0 : t.notification) == null ? void 0 : v.promotion) == null ? void 0 : I.mode) === no.LOWER_THIRD;
-  return /* @__PURE__ */ s(qs, {
-    ref: p,
+  const y = ((b = (m = (u = I == null ? void 0 : I.data) == null ? void 0 : u.notification) == null ? void 0 : m.promotion) == null ? void 0 : b.mode) === Ao.LOWER_THIRD;
+  return /* @__PURE__ */ e(rn, {
+    ref: $,
     style: {
-      height: f ? "auto" : "100%"
+      height: g ? "auto" : "100%"
     },
-    className: C("SL-AdvertisementUIWrap", c && "mobile-view", N && "SL-AdvertisementUIWrap--lower-third"),
-    children: /* @__PURE__ */ s(Ds, {
-      skipTypeCheck: r,
+    className: S("SL-AdvertisementUIWrap", p && "mobile-view", y && "SL-AdvertisementUIWrap--lower-third"),
+    children: /* @__PURE__ */ e(an, {
+      skipTypeCheck: t,
       sidebar: l,
-      banner: a,
-      advertisement: A.data,
-      close: A.close,
+      banner: r,
+      advertisement: I.data,
+      close: I.close,
+      externalAd: a ? I.externalAd : void 0,
       markAsViewed: o.advertisement.markAsViewed,
       open: o.advertisement.open,
-      layoutMode: e,
-      isNotification: d,
-      skipAutoClose: i
+      layoutMode: s,
+      isNotification: c,
+      skipAutoClose: i,
+      controlVideo: h
     })
   });
-}, Fs = ({
+}, cn = ({
   sdk: o,
-  sidebar: e,
-  banner: i,
-  skipAutoClose: r,
-  skipTypeCheck: l,
-  layoutMode: a,
-  isMobileScreen: d,
-  persistent: c,
-  notification: u
+  sidebar: s,
+  externalAd: i,
+  banner: t,
+  skipAutoClose: l,
+  skipTypeCheck: r,
+  layoutMode: c,
+  isMobileScreen: p,
+  persistent: v,
+  notification: a
 }) => {
-  const t = Y(o.featuresList.getStore());
-  if (e && i)
-    return /* @__PURE__ */ s("div", {
+  const h = co(o.featuresList.getStore());
+  if (B(() => {
+    if (i) {
+      const m = document.createElement("script");
+      m.async = !0, m.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js", document.body.appendChild(m);
+    }
+  }, [i]), s && t)
+    return /* @__PURE__ */ e("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (!t)
+  if (t && i)
+    return /* @__PURE__ */ e("div", {
+      style: {
+        color: "red"
+      },
+      children: "externalAd is not supported with banner"
+    });
+  if (!h)
     return null;
-  const v = o.getFeature(go.GAMES);
-  return v ? /* @__PURE__ */ s(js, {
-    gamification: v,
-    sidebar: e,
-    banner: i,
-    layoutMode: a,
-    isMobileScreen: d,
-    persistent: c,
-    notification: u,
-    skipTypeCheck: l,
-    skipAutoClose: r
+  const u = o.getFeature(Ro.GAMES);
+  return u ? /* @__PURE__ */ e(dn, {
+    gamification: u,
+    sidebar: s,
+    banner: t,
+    layoutMode: c,
+    isMobileScreen: p,
+    persistent: v,
+    notification: a,
+    skipTypeCheck: r,
+    skipAutoClose: l,
+    externalAd: i,
+    controlVideo: o.controlVideoPlayer
   }) : null;
-}, Ws = ({
+}, vn = ({
   event: o,
-  sidebar: e,
+  sidebar: s,
   banner: i,
-  isMobileScreen: r,
+  isMobileScreen: t,
   skipAutoClose: l,
-  persistent: a,
-  theme: d,
-  notification: c,
-  skipTypeCheck: u
+  persistent: r,
+  theme: c,
+  notification: p,
+  skipTypeCheck: v,
+  externalAd: a
 }) => {
-  const t = mo(), v = uo(), I = vo();
-  return t ? e && !v.promotionSidebar ? o !== void 0 && /* @__PURE__ */ s(b, { event: o }) : i && !v.promotionBanner ? o !== void 0 && /* @__PURE__ */ s(b, { event: o }) : c && !v.promotionNotification ? o !== void 0 && /* @__PURE__ */ s(b, { event: o }) : !i && !e && !c && !v.promotionOverlay ? o !== void 0 && /* @__PURE__ */ s(b, { event: o }) : /* @__PURE__ */ m("div", { className: "StreamLayerSDK", children: [
-    /* @__PURE__ */ s(Ao, { customTheme: d ?? I, children: /* @__PURE__ */ s(
-      Fs,
+  const h = Mo(), u = Oo(), m = Po();
+  return h ? a && !u.promotionExternalAd ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : !a && u.promotionExternalAd ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : s && !u.promotionSidebar ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : i && !u.promotionBanner ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : p && !u.promotionNotification ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : !i && !s && !p && !u.promotionOverlay ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : /* @__PURE__ */ A("div", { className: "StreamLayerSDK", children: [
+    /* @__PURE__ */ e(_o, { customTheme: c ?? m, children: /* @__PURE__ */ e(
+      cn,
       {
-        sdk: t,
-        sidebar: e,
+        sdk: h,
+        sidebar: s,
         banner: i,
-        isMobileScreen: r,
-        persistent: a,
-        notification: c,
-        skipTypeCheck: u,
+        isMobileScreen: t,
+        persistent: r,
+        notification: p,
+        skipTypeCheck: v,
         skipAutoClose: l,
-        layoutMode: "side-by-side"
+        layoutMode: "side-by-side",
+        externalAd: a
       }
     ) }),
-    o !== void 0 && /* @__PURE__ */ s(b, { event: o })
+    o !== void 0 && /* @__PURE__ */ e(T, { event: o })
   ] }) : null;
 };
 export {
-  Ws as StreamLayerSDKAdvertisement,
-  Fs as StreamLayerSDKAdvertisementUI
+  vn as StreamLayerSDKAdvertisement,
+  cn as StreamLayerSDKAdvertisementUI
 };