@streamlayer/react-ui - npm Package Compare versions

Comparing version 1.33.3 to 1.34.0

lib/app/app/Polymarket/index.d.ts

+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const StreamLayerSDKPolymarket: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

lib/app/app/Polymarket/index.js

+import { jsx as s } from "react/jsx-runtime";
+import { styled as y } from "@linaria/react";
+import { useStore as h } from "@streamlayer/react-polyfills";
+import { PolymarketCard as b } from "../../../ui/polymarket/index.js";
+const D = /* @__PURE__ */ y("div")({
+  name: "Container",
+  class: "claeaeg",
+  propsAsIs: !1
+}), P = (e) => /* @__PURE__ */ s(b, {
+  ...e
+}), k = ({
+  sdk: e
+}) => {
+  const o = h(e.polymarket.marketWithSeries);
+  if (!o.data)
+    return null;
+  const i = o.data.outcomes, {
+    teams: n,
+    chartData: m
+  } = i.reduce((r, t) => {
+    const l = t.points[t.points.length - 1], d = l ? l.p * 100 : t.probabilityPct;
+    return r.teams.push({
+      teamName: t.label,
+      probabilityPct: d,
+      teamColor: t.color ?? "",
+      teamLogo: t.rawMetadata.teamLogo ?? "",
+      isDraw: t.type === 2
+    }), r.chartData.push({
+      label: t.label,
+      color: t.rawMetadata.teamColor ?? `#${t.color ?? ""}`,
+      points: t.points
+    }), r;
+  }, {
+    teams: [],
+    chartData: []
+  }), {
+    drawTeam: a,
+    teamsWithoutDraw: p
+  } = n.reduce((r, t) => (t.isDraw ? r.drawTeam = t : r.teamsWithoutDraw.push(t), r), {
+    drawTeam: void 0,
+    teamsWithoutDraw: []
+  });
+  return /* @__PURE__ */ s(D, {
+    children: /* @__PURE__ */ s(P, {
+      logo: "https://cdn-test.streamlayer.io/web-sdk/polymarket.png",
+      volume: o.data.volume,
+      drawProbabilityPct: a == null ? void 0 : a.probabilityPct,
+      drawColor: a == null ? void 0 : a.teamColor,
+      teams: p,
+      chartData: m
+    })
+  });
+};
+export {
+  k as StreamLayerSDKPolymarket
+};

lib/app/app/Polymarket/story.d.ts

+import { DebugProps } from '../../../utils/debug';
+export declare const PolymarketStory: React.FC<DebugProps>;

lib/app/app/Polymarket/story.js

+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { d as m, e as s, u } from "../../../hooks-B0Qttldg.js";
+import { useStreamLayerDebug as d } from "../../../utils/debug/index.js";
+import { StreamLayerSDKPolymarket as i } from "./index.js";
+const y = () => {
+  const r = u();
+  return r ? /* @__PURE__ */ t(i, { sdk: r }) : null;
+}, v = ({ sdkKey: r, eventId: o, production: a }) => {
+  const e = d({ sdkKey: r, eventId: o, production: a });
+  return /* @__PURE__ */ n(m, { sdkKey: e.sdkKey, production: e.env === "production", autoEnable: !0, children: [
+    /* @__PURE__ */ t(s, { event: e.event }),
+    /* @__PURE__ */ t(y, {})
+  ] });
+};
+export {
+  v as PolymarketStory
+};

lib/index-Deo5_bIg.js

+let t = [], i = 0;
+const s = 4, a = /* @__NO_SIDE_EFFECTS__ */ (r) => {
+  let f = [], e = {
+    get() {
+      return e.lc || e.listen(() => {
+      })(), e.value;
+    },
+    lc: 0,
+    listen(l) {
+      return e.lc = f.push(l), () => {
+        for (let u = i + s; u < t.length; )
+          t[u] === l ? t.splice(u, s) : u += s;
+        let n = f.indexOf(l);
+        ~n && (f.splice(n, 1), --e.lc || e.off());
+      };
+    },
+    notify(l, n) {
+      let u = !t.length;
+      for (let o of f)
+        t.push(o, e.value, l, n);
+      if (u) {
+        for (i = 0; i < t.length; i += s)
+          t[i](
+            t[i + 1],
+            t[i + 2],
+            t[i + 3]
+          );
+        t.length = 0;
+      }
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    off() {
+    },
+    set(l) {
+      let n = e.value;
+      n !== l && (e.value = l, e.notify(n));
+    },
+    subscribe(l) {
+      let n = e.listen(l);
+      return l(e.value), n;
+    },
+    value: r
+  };
+  return e;
+};
+export {
+  a
+};

lib/index-Fv2CC2QU.js

+import { a as n } from "./index-Deo5_bIg.js";
+const f = /* @__NO_SIDE_EFFECTS__ */ (o = {}) => {
+  let e = n(o);
+  return e.setKey = function(a, t) {
+    let l = e.value;
+    typeof t > "u" && a in e.value ? (e.value = { ...e.value }, delete e.value[a], e.notify(l, a)) : e.value[a] !== t && (e.value = {
+      ...e.value,
+      [a]: t
+    }, e.notify(l, a));
+  }, e;
+};
+export {
+  f as m
+};

lib/ui/polymarket/index.d.ts

+export type PolymarketCardProps = {
+    logo: string;
+    volume: number;
+    drawProbabilityPct: number;
+    teams: {
+        teamName: string;
+        probabilityPct: number;
+        teamColor: string;
+        teamLogo: string;
+    }[];
+    drawColor: string;
+    chartData: {
+        label: string;
+        color: string;
+        points: Array<{
+            t: string;
+            p: number;
+        }>;
+    }[];
+};
+export declare const PolymarketCard: React.FC<PolymarketCardProps>;

lib/ui/polymarket/index.js

+import { jsxs as m, jsx as g } from "react/jsx-runtime";
+import { createChart as M, ColorType as U, LineStyle as k, LineSeries as H } from "lightweight-charts";
+import { useRef as P, useEffect as z } from "react";
+import { Container as R, Header as F, Logo as q, AdTitle as W, Vol as A, Teams as B, Team as I, TeamLogo as j, TeamName as D, TeamPercentage as N, Draw as O, DrawPercentage as Z, Chart as G } from "./styles.js";
+const J = (c) => `${(c / 1e3).toFixed(1)}`, V = (c) => c && !c.startsWith("#") ? `#${c}` : c ?? "#fff", _ = ({
+  logo: c,
+  volume: S,
+  drawProbabilityPct: E,
+  teams: f,
+  drawColor: v,
+  chartData: n
+}) => {
+  var w;
+  const C = P(null);
+  return z(() => {
+    var x;
+    const a = C.current;
+    if (!a || !n || n.length === 0)
+      return;
+    let u = 0;
+    n.forEach((t) => {
+      t.points.forEach((e) => {
+        const o = e.p * 100;
+        o > u && (u = o);
+      });
+    });
+    const y = Math.floor(u / 10) * 10, b = 0, d = ((x = n[0]) == null ? void 0 : x.points) || [];
+    let l = "day";
+    if (d.length >= 2) {
+      const t = new Date(d[0].t).getTime() / 1e3, o = new Date(d[1].t).getTime() / 1e3 - t;
+      o >= 20 * 60 * 60 ? l = "day" : o >= 60 * 60 ? l = "hour" : l = "minute";
+    }
+    const h = M(a, {
+      layout: {
+        background: { type: U.Solid, color: "transparent" },
+        textColor: "rgba(255, 255, 255, 0.5)",
+        fontSize: 12
+      },
+      grid: {
+        vertLines: { visible: !1 },
+        horzLines: {
+          color: "rgba(255, 255, 255, 0.2)",
+          style: k.Dashed
+        }
+      },
+      crosshair: {
+        mode: 0,
+        vertLine: {
+          visible: !1,
+          labelVisible: !1
+        },
+        horzLine: {
+          visible: !1,
+          labelVisible: !1
+        }
+      },
+      width: a.clientWidth,
+      handleScroll: !1,
+      handleScale: !1,
+      height: 300,
+      localization: {
+        timeFormatter: (t) => {
+          const e = new Date(t * 1e3);
+          if (l === "day") {
+            const o = e.getUTCDate(), i = e.toLocaleDateString("en-US", { month: "short", timeZone: "UTC" });
+            return `${o} ${i}`;
+          } else {
+            if (l === "hour")
+              return `${e.getUTCHours()}h`;
+            {
+              const o = e.getUTCHours(), i = e.getUTCMinutes(), s = o >= 12 ? "pm" : "am";
+              return `${o % 12 || 12}:${i.toString().padStart(2, "0")}${s}`;
+            }
+          }
+        }
+      },
+      timeScale: {
+        timeVisible: !0,
+        secondsVisible: !1,
+        barSpacing: 30,
+        minBarSpacing: 8,
+        rightOffset: 15,
+        allowBoldLabels: !1,
+        borderColor: "rgba(255, 255, 255, 0.5)",
+        fixLeftEdge: !0,
+        fixRightEdge: !0,
+        tickMarkFormatter: (t) => {
+          const e = new Date(t * 1e3);
+          if (!d.slice(-4).map((i) => Math.floor(new Date(i.t).getTime() / 1e3)).includes(t))
+            return "";
+          if (l === "day") {
+            const i = e.getUTCDate(), s = e.toLocaleDateString("en-US", { month: "short", timeZone: "UTC" });
+            return `${i} ${s}`;
+          } else {
+            if (l === "hour")
+              return `${e.getUTCHours()}h`;
+            {
+              const i = e.getUTCHours(), s = e.getUTCMinutes(), r = i >= 12 ? "pm" : "am";
+              return `${i % 12 || 12}:${s.toString().padStart(2, "0")}${r}`;
+            }
+          }
+        }
+      },
+      rightPriceScale: {
+        visible: !0,
+        borderVisible: !1,
+        autoScale: !1
+      },
+      leftPriceScale: {
+        visible: !1
+      }
+    }), $ = [];
+    if (n.forEach((t) => {
+      var s;
+      const e = h.addSeries(H, {
+        color: t.color,
+        lineWidth: 4,
+        lastValueVisible: !1,
+        priceLineVisible: !1,
+        priceFormat: {
+          type: "custom",
+          formatter: (r) => `${Math.round(r)}%`
+        },
+        autoscaleInfoProvider: () => ({
+          priceRange: {
+            minValue: b,
+            maxValue: y
+          }
+        })
+      }), o = (s = t.points) == null ? void 0 : s.map((r) => ({
+        time: Math.floor(new Date(r.t).getTime() / 1e3),
+        value: r.p * 100
+      })), i = o == null ? void 0 : o.filter(
+        (r, p, T) => p === 0 || r.time !== T[p - 1].time
+      );
+      e.setData(i), i.length > 0 && $.push({
+        series: e,
+        lastPoint: i[i.length - 1],
+        color: t.color
+      });
+    }), d.length >= 4) {
+      const t = d.slice(-4), e = Math.floor(new Date(t[0].t).getTime() / 1e3), o = Math.floor(new Date(t[3].t).getTime() / 1e3), i = o - e, s = i * 0.02, r = i * 0.03;
+      h.timeScale().setVisibleRange({
+        from: e - s,
+        to: o + r
+      });
+    } else
+      h.timeScale().fitContent();
+    setTimeout(() => {
+      const t = a.querySelector(".tv-lightweight-charts");
+      if (!t)
+        return;
+      t.style.position = "relative";
+      const e = t.querySelector("table");
+      e && (e.style.position = "relative", e.style.zIndex = "1", e.style.pointerEvents = "none"), $.forEach(({ series: o, lastPoint: i, color: s }) => {
+        const r = o.priceToCoordinate(i.value), p = h.timeScale().timeToCoordinate(i.time);
+        if (r !== null && p !== null) {
+          const T = document.createElement("div");
+          T.style.cssText = `
+            position: absolute !important;
+            width: 40px !important;
+            height: 40px !important;
+            border-radius: 50% !important;
+            background-color: ${s} !important;
+            border: 10px solid rgba(26, 26, 26, 0.75) !important;
+            left: ${p - 20}px !important;
+            top: ${r - 20}px !important;
+            pointer-events: none !important;
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+          `, T.className = "chart-endpoint-marker", t.appendChild(T);
+        }
+      });
+    }, 100);
+    const L = () => {
+      a && h.applyOptions({ width: a.clientWidth });
+    };
+    return window.addEventListener("resize", L), () => {
+      window.removeEventListener("resize", L);
+      const t = a.querySelector(".tv-lightweight-charts");
+      t && t.querySelectorAll(".chart-endpoint-marker").forEach((o) => o.remove()), h.remove();
+    };
+  }, [n]), /* @__PURE__ */ m(R, { children: [
+    /* @__PURE__ */ m(F, { children: [
+      /* @__PURE__ */ g(q, { src: c }),
+      /* @__PURE__ */ g(W, { children: "Ad" })
+    ] }),
+    /* @__PURE__ */ m(A, { children: [
+      "$",
+      J(S),
+      "k Vol."
+    ] }),
+    /* @__PURE__ */ g(B, { children: f == null ? void 0 : f.map(({ teamLogo: a, teamName: u, probabilityPct: y, teamColor: b }, d) => {
+      var l;
+      return /* @__PURE__ */ m(I, { children: [
+        /* @__PURE__ */ g(j, { src: a }),
+        /* @__PURE__ */ g(D, { children: u }),
+        /* @__PURE__ */ m(N, { style: { color: b ? V(b) : ((l = n == null ? void 0 : n[d]) == null ? void 0 : l.color) ?? "#fff" }, children: [
+          Math.round(y),
+          "%"
+        ] })
+      ] }, u);
+    }) }),
+    /* @__PURE__ */ m(O, { children: [
+      "Draw",
+      " ",
+      /* @__PURE__ */ m(
+        Z,
+        {
+          style: {
+            color: v ? V(v) : ((w = n == null ? void 0 : n[(f == null ? void 0 : f.length) ?? 0]) == null ? void 0 : w.color) ?? "#fff"
+          },
+          children: [
+            Math.round(E),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ g(G, { ref: C })
+  ] });
+};
+export {
+  _ as PolymarketCard
+};

lib/ui/polymarket/styles.d.ts

+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Header: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Logo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AdTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Vol: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Teams: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Team: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TeamLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const TeamName: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const TeamPercentage: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Draw: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DrawPercentage: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Chart: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

lib/ui/polymarket/styles.js

+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c16uapq7",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Header",
+  class: "h1bkiv31",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("img")({
+  name: "Logo",
+  class: "l58x1zx",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("span")({
+  name: "AdTitle",
+  class: "aje8tdj",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "Vol",
+  class: "v1b9hkhr",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Teams",
+  class: "t103i3ll",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Team",
+  class: "tv6559o",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("img")({
+  name: "TeamLogo",
+  class: "td9fhm",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("span")({
+  name: "TeamName",
+  class: "t1bg0qru",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("span")({
+  name: "TeamPercentage",
+  class: "t1k3nqya",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Draw",
+  class: "du878ld",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("span")({
+  name: "DrawPercentage",
+  class: "d11m2h7g",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "Chart",
+  class: "cpgwa9e",
+  propsAsIs: !1
+});
+export {
+  l as AdTitle,
+  A as Chart,
+  e as Container,
+  i as Draw,
+  f as DrawPercentage,
+  o as Header,
+  n as Logo,
+  r as Team,
+  t as TeamLogo,
+  m as TeamName,
+  d as TeamPercentage,
+  c as Teams,
+  p as Vol
+};

lib/app/masters/useSdkResponsive.js

 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
-import { m as p } from "../../index-DSi8Qgfs.js";
+import { m as p } from "../../index-Fv2CC2QU.js";
 const d = Object.keys(r), i = () => {
@@ -6,0 +6,0 @@ const t = window.innerWidth;

lib/app/masters/useSdkScroll.js

@@ -5,3 +5,3 @@ import g from "lodash.throttle";
 import { BREAKPOINTS as d } from "../../ui/theme/constants.js";
-import { m as E } from "../../index-DSi8Qgfs.js";
+import { m as E } from "../../index-Fv2CC2QU.js";
 const y = (e, i, o) => {
@@ -8,0 +8,0 @@ var t;

lib/app/useSdkResponsive.js

 import i from "lodash.throttle";
 import { useState as m, useEffect as a } from "react";
 import { BREAKPOINTS as r } from "../ui/theme/constants.js";
-import { m as u } from "../index-DSi8Qgfs.js";
+import { m as u } from "../index-Fv2CC2QU.js";
 const o = Object.keys(r), c = () => {
@@ -6,0 +6,0 @@ const t = window.innerWidth;

lib/app/useSdkScroll.js

@@ -6,3 +6,3 @@ import h from "lodash.throttle";
 import { checkSdkInDesktopView as m } from "./useSdkResponsive.js";
-import { m as v } from "../index-DSi8Qgfs.js";
+import { m as v } from "../index-Fv2CC2QU.js";
 const I = (o, e, n) => {
@@ -9,0 +9,0 @@ const t = e >= a.lg && e < a.xl ? 75 : 52;

lib/app/webos/Advertisement/index.js

@@ -1,25 +0,25 @@
-import { jsx as u, jsxs as $ } from "react/jsx-runtime";
+import { jsx as l, jsxs as N } from "react/jsx-runtime";
 import { cx as V } from "@linaria/core";
-import { styled as j } from "@linaria/react";
-import { StreamLayerSDKBannerProvider as q } from "../../app/Banner/index.js";
-import { useAnalyticsListener as H } from "../../../hooks/analytics.js";
-import { useHideTransition as Q } from "../../../hooks/showIn.js";
-import { forwardRef as G, useEffect as _, useRef as z } from "react";
-import { useStore as d } from "@streamlayer/react-polyfills";
+import { styled as $ } from "@linaria/react";
+import { StreamLayerSDKBannerProvider as j } from "../../app/Banner/index.js";
+import { useAnalyticsListener as q } from "../../../hooks/analytics.js";
+import { useHideTransition as H } from "../../../hooks/showIn.js";
+import { forwardRef as Q, useEffect as G, useRef as _ } from "react";
+import { useStore as u } from "@streamlayer/react-polyfills";
 import { eventBus as x } from "@streamlayer/sdk-web-interfaces";
-import { QuestionPosition as C, AdUnit as J, PromotionType as X, FeatureType as Y } from "@streamlayer/sdk-web-types";
-import { useAdvertisementBackground as Z } from "../../../ui/theme/utils.js";
-import { AdvertisementUI as ee } from "./AdvertisementUI.js";
-const D = /* @__PURE__ */ j("div")({
+import { QuestionPosition as z, AdUnit as C, PromotionType as J, FeatureType as X } from "@streamlayer/sdk-web-types";
+import { useAdvertisementBackground as Y } from "../../../ui/theme/utils.js";
+import { AdvertisementUI as Z } from "./AdvertisementUI.js";
+const D = /* @__PURE__ */ $("div")({
   name: "AdvertisementUIWrap",
   class: "a17b2u9w",
   propsAsIs: !1
-}), te = (t) => {
+}), ee = (t) => {
   const r = t.target;
   if (r instanceof HTMLAnchorElement && r.target === "_blank") {
-    const n = r.getAttribute("data-promo-id") || "", a = r.getAttribute("data-promo-type") || X.UNSET;
+    const s = r.getAttribute("data-promo-id") || "", a = r.getAttribute("data-promo-type") || J.UNSET;
     r.getAttribute("data-a") === "button" && x.emit("advertisement", {
       action: "buttonSelect",
       payload: {
-        id: n,
+        id: s,
         type: a
@@ -30,3 +30,3 @@ }
       payload: {
-        id: n,
+        id: s,
         type: a
@@ -36,37 +36,37 @@ }
   }
-}, re = G(({
+}, te = Q(({
   gamification: t,
   skipAutoClose: r,
-  containerId: n,
+  containerId: s,
   muted: a,
-  notification: m,
-  sidebar: l,
-  banner: i,
+  notification: i,
+  sidebar: d,
+  banner: n,
   persistent: c,
   controlVideo: p
-}, s) => {
-  var g, A, S, b, U, y, I, L, P, h, W, k, w, E, T, B;
-  const e = d(t.advertisement.$store), o = d(t.openedQuestion.$store), f = d(t.openedQuestion.$extendedStore), {
+}, m) => {
+  var A, g, b, S, y, L, U, P, I, W, O, h, k, E, T, B;
+  const e = u(t.advertisement.$store), o = u(t.openedQuestion.$store), f = u(t.openedQuestion.$extendedStore), {
     finished: v
-  } = Q();
-  H(s, {
+  } = H();
+  q(m, {
     enabled: !!e.data,
     event: "click",
-    listener: te
-  }), _(() => {
-    var O;
-    v && ((O = e.close) == null || O.call(e));
+    listener: ee
+  }), G(() => {
+    var w;
+    v && ((w = e.close) == null || w.call(e));
   }, [v]);
-  const F = !i && !l, M = ((S = (A = (g = e.data) == null ? void 0 : g.question) == null ? void 0 : A.backgroundImage) == null ? void 0 : S.landscapeUrl) || ((U = (b = e.data) == null ? void 0 : b.promotion) == null ? void 0 : U.backgroundImageLandscapeUrl), R = ((L = (I = (y = e.data) == null ? void 0 : y.question) == null ? void 0 : I.backgroundImage) == null ? void 0 : L.portraitUrl) || ((h = (P = e.data) == null ? void 0 : P.promotion) == null ? void 0 : h.backgroundImagePortraitUrl), K = Z({
-    containerId: n,
-    landscapeUrl: M,
-    portraitUrl: R
-  }), N = ((k = (W = f == null ? void 0 : f.data) == null ? void 0 : W.appearance) == null ? void 0 : k.position) === C.LBAR;
-  return i && e.data === void 0 && ((w = o == null ? void 0 : o.attributes) == null ? void 0 : w.adUnit) === J.STANDART && N && ((B = (T = (E = o == null ? void 0 : o.attributes) == null ? void 0 : E.adPromotion) == null ? void 0 : T.banner) != null && B.imageUrl) ? /* @__PURE__ */ u(D, {
-    ref: s,
+  const F = ((b = (g = (A = e.data) == null ? void 0 : A.question) == null ? void 0 : g.backgroundImage) == null ? void 0 : b.landscapeUrl) || ((y = (S = e.data) == null ? void 0 : S.promotion) == null ? void 0 : y.backgroundImageLandscapeUrl), M = ((P = (U = (L = e.data) == null ? void 0 : L.question) == null ? void 0 : U.backgroundImage) == null ? void 0 : P.portraitUrl) || ((W = (I = e.data) == null ? void 0 : I.promotion) == null ? void 0 : W.backgroundImagePortraitUrl), R = Y({
+    containerId: s,
+    landscapeUrl: F,
+    portraitUrl: M
+  }), K = ((h = (O = f == null ? void 0 : f.data) == null ? void 0 : O.appearance) == null ? void 0 : h.position) === z.LBAR;
+  return n && e.data === void 0 && ((k = o == null ? void 0 : o.attributes) == null ? void 0 : k.adUnit) === C.STANDART && K && ((B = (T = (E = o == null ? void 0 : o.attributes) == null ? void 0 : E.adPromotion) == null ? void 0 : T.banner) != null && B.imageUrl) ? /* @__PURE__ */ l(D, {
+    ref: m,
     style: {
       height: "100%"
     },
-    className: V("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
-    children: /* @__PURE__ */ u(q, {
+    className: V("SL-AdvertisementWebOs", "SL-AdvertisementWebOs--banner"),
+    children: /* @__PURE__ */ l(j, {
       cardId: o.id,
@@ -77,13 +77,13 @@ promotion: {
       },
-      direction: i
+      direction: n
     })
-  }) : e.data === void 0 || !c && e.isViewed ? null : /* @__PURE__ */ $(D, {
-    ref: s,
+  }) : e.data === void 0 || !c && e.isViewed ? null : /* @__PURE__ */ N(D, {
+    ref: m,
     style: {
-      height: F ? "auto" : "100%"
+      height: d || n ? "100%" : "auto"
     },
-    className: V("SL-AdvertisementUIWrap", "SL-AdvertisementWebOs", "SL-AdvertisementUIWrap--lower-third"),
-    children: [!m && K, /* @__PURE__ */ u(ee, {
-      sidebar: l,
-      banner: i,
+    className: V("SL-AdvertisementWebOs", !d && !n && !i && "SL-AdvertisementWebOs--overlay", d && "SL-AdvertisementWebOs--sidebar", n && "SL-AdvertisementWebOs--banner", i && "SL-AdvertisementWebOs--notification"),
+    children: [!i && R, /* @__PURE__ */ l(Z, {
+      sidebar: d,
+      banner: n,
       advertisement: e.data,
@@ -100,3 +100,3 @@ advertisementPaused: !!e.isPaused,
       open: t.advertisement.open,
-      isNotification: m,
+      isNotification: i,
       skipAutoClose: r,
@@ -107,26 +107,26 @@ controlVideo: p,
   });
-}), ge = ({
+}), ve = ({
   sdk: t,
   sidebar: r,
-  muted: n,
+  muted: s,
   banner: a,
-  skipAutoClose: m,
-  persistent: l,
-  notification: i
+  skipAutoClose: i,
+  persistent: d,
+  notification: n
 }) => {
   const {
     containerId: c
-  } = d(t.options), p = d(t.featuresList.getStore()), s = z(null);
+  } = u(t.options), p = u(t.featuresList.getStore()), m = _(null);
   if (!p)
     return null;
-  const e = t.getFeature(Y.GAMES);
-  return e != null && e.advertisement ? /* @__PURE__ */ u(re, {
-    ref: s,
+  const e = t.getFeature(X.GAMES);
+  return e != null && e.advertisement ? /* @__PURE__ */ l(te, {
+    ref: m,
     gamification: e,
     sidebar: r,
     banner: a,
-    persistent: l,
-    skipAutoClose: m,
-    muted: n,
-    notification: i,
+    persistent: d,
+    skipAutoClose: i,
+    muted: s,
+    notification: n,
     containerId: c,
@@ -137,3 +137,3 @@ controlVideo: t.controlVideoPlayer
 export {
-  ge as StreamLayerSDKAdvertisementWebOS
+  ve as StreamLayerSDKAdvertisementWebOS
 };

lib/app/webos/ExposedPauseAd/PauseAd.js

@@ -1,67 +0,70 @@
-import { jsx as u, jsxs as b } from "react/jsx-runtime";
-import { cx as G } from "@linaria/core";
-import { useFocusable as I } from "@noriginmedia/norigin-spatial-navigation";
-import { useState as B, useRef as E, useCallback as C, useEffect as y } from "react";
-import { useStore as N } from "@streamlayer/react-polyfills";
-import { eventBus as g } from "@streamlayer/sdk-web-interfaces";
-import { useLoadGAMStatic as M } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
-import { PauseAdOverlay as j, PauseAdContent as K, PauseAdTopLeft as O, PauseAdTitle as V, PauseAdCaption as $, PauseAdBottomLeft as _, PauseAdPlayButton as q, PauseAdSidebarGradient as z, PauseAdSidebar as H, PauseAdTitleDescription as J, ExternalAdContainer as D } from "./styles.js";
-const Q = ({ vastUrl: r, isDesktop: o }) => {
-  var a;
-  const [, h] = M(), e = N(h, { keys: [r] });
-  return y(() => {
-    e && e[r] && e[r].imageSrc && e[r].id && g.emit("exposedPauseAd", {
-      action: "rendered",
-      payload: {
-        id: e[r].id
-      }
-    });
-  }, [e, r]), (a = e == null ? void 0 : e[r]) != null && a.imageSrc ? !e[r].adUrl || !o ? /* @__PURE__ */ u(D, { src: e[r].imageSrc }) : /* @__PURE__ */ u(
-    "a",
-    {
-      onClick: () => {
-        g.emit("exposedPauseAd", {
-          action: "navigated",
-          payload: {
-            id: e[r].id
-          }
-        });
-      },
-      href: e[r].adUrl,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: /* @__PURE__ */ u(D, { src: e[r].imageSrc })
+import { jsx as u, jsxs as B } from "react/jsx-runtime";
+import { cx as j } from "@linaria/core";
+import { useFocusable as K } from "@noriginmedia/norigin-spatial-navigation";
+import { useState as F, useRef as w, useCallback as N, useEffect as n } from "react";
+import { useStore as M } from "@streamlayer/react-polyfills";
+import { eventBus as v } from "@streamlayer/sdk-web-interfaces";
+import { PauseAdOverlay as U, PauseAdContent as V, PauseAdTopLeft as $, PauseAdTitle as G, PauseAdCaption as _, PauseAdBottomLeft as q, PauseAdPlayButton as z, PauseAdSidebarGradient as H, PauseAdSidebar as J, PauseAdTitleDescription as Q, ExternalAdContainer as O } from "./styles.js";
+const W = ({
+  vastUrl: l,
+  isDesktop: o,
+  content: r
+}) => (n(() => {
+  r.imageSrc && r.id && v.emit("exposedPauseAd", {
+    action: "rendered",
+    payload: {
+      id: r.id,
+      parentId: r.parentId
     }
-  ) : null;
-}, W = ({ isClosing: r, title: o, caption: h, onPlay: e, onClose: a, vastUrl: f, options: t, isDesktop: m }) => {
-  const T = (t == null ? void 0 : t.showPauseButton) ?? !0, { ref: s, focusSelf: p } = I({
+  });
+}, [r, l]), r != null && r.imageSrc ? !r.adUrl || !o ? /* @__PURE__ */ u(O, { src: r.imageSrc }) : /* @__PURE__ */ u(
+  "a",
+  {
+    onClick: () => {
+      v.emit("exposedPauseAd", {
+        action: "navigated",
+        payload: {
+          id: r.id,
+          parentId: r.parentId
+        }
+      });
+    },
+    href: r.adUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: /* @__PURE__ */ u(O, { src: r.imageSrc })
+  }
+) : null), X = ({ isClosing: l, content: o, externalPauseAdStore: r, title: k, caption: y, onPlay: f, onClose: a, vastUrl: c, options: A, isDesktop: m }) => {
+  const b = (A == null ? void 0 : A.showPauseButton) ?? !0, { ref: s, focusSelf: I } = K({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: e,
+    onEnterRelease: f,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return y(() => {
-    s.current && p();
-  }, [s, p]), y(() => {
+  return n(() => () => {
+    r.revalidate();
+  }, [r]), n(() => {
+    s.current && I();
+  }, [s, I]), n(() => {
     if (!a)
       return () => {
       };
-    const S = (A) => {
-      const d = A.keyCode;
-      if (d === 461 || d === 10009 || d === 27 || d === 8) {
-        A.preventDefault(), A.stopPropagation(), A.stopImmediatePropagation(), a();
+    const E = (d) => {
+      const t = d.keyCode;
+      if (t === 461 || t === 10009 || t === 27 || t === 8) {
+        d.preventDefault(), d.stopPropagation(), d.stopImmediatePropagation(), a();
         return;
       }
     };
-    return window.addEventListener("keydown", S, { capture: !0 }), () => window.removeEventListener("keydown", S, { capture: !0 });
-  }, [a]), /* @__PURE__ */ u(j, { className: G("SL_PauseAdOverlay", r && "pause-ad-closing"), children: /* @__PURE__ */ b(K, { children: [
-    /* @__PURE__ */ b(O, { children: [
-      /* @__PURE__ */ u(V, { children: o }),
-      /* @__PURE__ */ u($, { children: h })
+    return window.addEventListener("keydown", E, { capture: !0 }), () => window.removeEventListener("keydown", E, { capture: !0 });
+  }, [a]), /* @__PURE__ */ u(U, { className: j("SL_PauseAdOverlay", l && "pause-ad-closing"), children: /* @__PURE__ */ B(V, { children: [
+    /* @__PURE__ */ B($, { children: [
+      /* @__PURE__ */ u(G, { children: k }),
+      /* @__PURE__ */ u(_, { children: y })
     ] }),
-    T && /* @__PURE__ */ u(_, { children: /* @__PURE__ */ u(
-      q,
+    b && /* @__PURE__ */ u(q, { children: /* @__PURE__ */ u(
+      z,
       {
         ref: s,
-        onClick: e,
+        onClick: f,
         onMouseEnter: () => s.current.focus(),
@@ -71,67 +74,91 @@ "aria-label": "Resume playback"
     ) }),
-    /* @__PURE__ */ u(z, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ b(H, { children: [
-      f && /* @__PURE__ */ u(Q, { isDesktop: m, vastUrl: f }),
-      /* @__PURE__ */ u(J, { children: "ADVERTISEMENT" })
+    /* @__PURE__ */ u(H, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ B(J, { children: [
+      c && /* @__PURE__ */ u(W, { content: o, isDesktop: m, vastUrl: c }),
+      /* @__PURE__ */ u(Q, { children: "ADVERTISEMENT" })
     ] }) })
   ] }) });
-}, te = ({ showPauseAd: r, vastUrls: o, title: h, caption: e, sdk: a, onClose: f, onRender: t, options: m, isDesktop: T }) => {
-  const s = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, S] = B(!1), [A, d] = B(!1), c = E(), i = o == null ? void 0 : o[0].url, P = E(i), x = E("");
-  P.current = i;
-  const [k, w] = M(), n = C(() => {
-    f && (x.current = P.current, g.emit("exposedPauseAd", {
-      action: "closed",
-      payload: {}
-    }), f());
-  }, [f]), F = C(() => {
-    a.controlVideoPlayer({ play: !0 });
-  }, [a]);
-  return y(() => {
-    if (r && i) {
-      g.emit("exposedPauseAd", {
+}, se = ({ showPauseAd: l, vastUrls: o, title: r, caption: k, sdk: y, onClose: f, onRender: a, options: c, isDesktop: A }) => {
+  const m = (c == null ? void 0 : c.pauseAdDelay) ?? 0, b = (c == null ? void 0 : c.pauseAdRefetchInterval) ?? 1e3 * 60 * 50, [s, I] = F(!1), [E, d] = F(!1), t = w(), p = o == null ? void 0 : o[0].url, P = w(p), S = w(""), T = w("");
+  P.current = p;
+  const [i, D] = y.advertisement.getExternalPauseAd(p, {
+    refetchInterval: b,
+    $enabled: m === 0 || !!l,
+    prefetch: m === 0 && b > 0
+  }), x = M(i), g = N(() => {
+    if (f) {
+      T.current = P.current;
+      const e = i.get().data;
+      v.emit("exposedPauseAd", {
+        action: "closed",
+        payload: (e == null ? void 0 : e.url) === T.current ? {
+          id: e == null ? void 0 : e.id,
+          parentId: e == null ? void 0 : e.parentId
+        } : {}
+      }), f();
+    }
+  }, [f, i]), R = N(() => {
+    y.controlVideoPlayer({ play: !0 });
+  }, [y]);
+  return n(() => {
+    D === P.current && x.error && (console.log("error", x.error), clearTimeout(t.current), g == null || g());
+  }, [x, g, D]), n(() => {
+    if (l && p) {
+      S.current = P.current, T.current = "";
+      const e = i.get().data;
+      v.emit("exposedPauseAd", {
         action: "enabled",
-        payload: {}
-      }), k(i).then((l) => {
-        P.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), n == null || n());
-      }).catch(() => {
-        P.current === i && (clearTimeout(c.current), n == null || n());
+        payload: (e == null ? void 0 : e.url) === S.current ? {
+          id: e == null ? void 0 : e.id,
+          parentId: e == null ? void 0 : e.parentId
+        } : {}
       });
       const L = () => {
-        const l = w.get()[P.current];
-        l != null && l.imageSrc ? (clearTimeout(c.current), d(!1), S(!0)) : c.current = setTimeout(() => {
-          L();
-        }, 200);
+        const C = i.get(), h = C.data;
+        (h == null ? void 0 : h.url) === P.current && (!C.loading && (h != null && h.imageSrc) ? (clearTimeout(t.current), d(!1), I(!0)) : C.loading && (t.current = setTimeout(() => {
+          console.log("checkAndAllowRender timeout"), L();
+        }, 200)));
       };
-      c.current = setTimeout(() => {
+      clearTimeout(t.current), t.current = setTimeout(() => {
         L();
-      }, s);
-    } else
-      x.current !== P.current && (x.current = "", g.emit("exposedPauseAd", {
-        action: "disabled",
-        payload: {}
-      })), d(!0), c.current = setTimeout(() => {
-        S(!1);
+      }, m);
+    } else {
+      if (T.current !== P.current) {
+        const e = i.get().data;
+        T.current = "", S.current !== "" && (v.emit("exposedPauseAd", {
+          action: "disabled",
+          payload: S.current === (e == null ? void 0 : e.url) ? {
+            id: e == null ? void 0 : e.id,
+            parentId: e == null ? void 0 : e.parentId
+          } : {}
+        }), S.current = "");
+      }
+      d(!0), t.current = setTimeout(() => {
+        I(!1);
       }, 400);
+    }
     return () => {
-      c.current && clearTimeout(c.current);
+      t.current && clearTimeout(t.current);
     };
-  }, [w, k, n, s, r, i]), y(() => {
-    t == null || t({ rendered: p });
-  }, [p, t]), y(() => () => {
-    t == null || t({ rendered: !1 });
-  }, [t]), p ? /* @__PURE__ */ u(
-    W,
+  }, [i, g, m, l, p]), n(() => {
+    a == null || a({ rendered: s });
+  }, [s, a]), n(() => () => {
+    a == null || a({ rendered: !1 });
+  }, [a]), !s || !x.data ? null : /* @__PURE__ */ u(
+    X,
     {
-      onClose: n,
-      isClosing: A,
-      title: h,
-      caption: e,
-      onPlay: F,
-      vastUrl: i,
-      options: m,
-      isDesktop: T
+      onClose: g,
+      isClosing: E,
+      title: r,
+      caption: k,
+      onPlay: R,
+      vastUrl: p,
+      options: c,
+      isDesktop: A,
+      externalPauseAdStore: i,
+      content: x.data
     }
-  ) : null;
+  );
 };
 export {
-  te as PauseAd
+  se as PauseAd
 };

lib/app/webos/index.d.ts

@@ -10,2 +10,3 @@ import { Component } from 'react';
     pauseAdDelay?: number;
+    pauseAdRefetchInterval?: number;
 };
@@ -12,0 +13,0 @@ export type StreamLayerSDKTvProps = {

lib/app/webos/Question/index.js

@@ -1,15 +0,15 @@
-import { jsx as n } from "react/jsx-runtime";
-import { styled as N } from "@linaria/react";
-import { Question as O } from "../../app/Features/Gamification/Question.js";
-import { useHideTransition as R } from "../../../hooks/showIn.js";
-import { useState as g, useMemo as C, useEffect as l } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as C } from "@linaria/react";
+import { Question as q } from "../../app/Features/Gamification/Question.js";
+import { useHideTransition as b } from "../../../hooks/showIn.js";
+import { useState as E, useMemo as L, useEffect as l } from "react";
 import { useStore as A } from "@streamlayer/react-polyfills";
-import { eventBus as D } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as Q } from "@streamlayer/sdk-web-notifications";
-import { FeatureType as b, QuestionType as h, AdUnit as S } from "@streamlayer/sdk-web-types";
-import { InAppNotification as w } from "../../../ui/gamification/question/inapp/notification/AdNotification/index.js";
-import { InAppPredictionResult as U } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
-import { InAppPredictionResultAd as x } from "../../../ui/gamification/question/inapp/prediction-result-ad/index.js";
-import { ShowIn as L } from "../../../ui/show-in/index.js";
-const P = () => L, j = /* @__PURE__ */ N(P())({
+import { eventBus as R } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { FeatureType as D, QuestionType as Q, AdUnit as S } from "@streamlayer/sdk-web-types";
+import { InAppNotification as W } from "../../../ui/gamification/question/inapp/notification/AdNotification/index.js";
+import { InAppPredictionResult as h } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
+import { InAppPredictionResultAd as U } from "../../../ui/gamification/question/inapp/prediction-result-ad/index.js";
+import { ShowIn as w } from "../../../ui/show-in/index.js";
+const x = () => w, P = /* @__PURE__ */ C(x())({
   name: "OpenedContainer",
@@ -20,12 +20,12 @@ class: "osyjgip",
   sdk: o,
-  notification: i
+  notification: n
 }) => {
-  var a, s, p, u, c, m, f, d;
+  var a, s, p, c, u, m, d, f;
   const T = A(o.featuresList.getStore()), {
     hiding: y,
-    onAnimationEnd: I,
+    onAnimationEnd: N,
     finished: r
-  } = R(), [q] = g(o.getNotificationsStore()), E = A(q), t = C(() => o.getActiveNotification(), [o, E]);
+  } = b(), [I] = E(o.getNotificationsStore()), O = A(I), t = L(() => o.getActiveNotification(), [o, O]);
   l(() => {
-    t && D.emit("notification", {
+    t && R.emit("notification", {
       action: "rendered",
@@ -38,6 +38,7 @@ payload: {
   }, [t]);
-  const e = o.getFeature(b.GAMES);
+  const e = o.getFeature(D.GAMES);
   return l(() => {
     r && (e == null || e.closeQuestion());
-  }, [r, e]), !T || !e ? null : i && t && t.type === Q.QUESTION_RESOLVED && t.data.questionType === h.PREDICTION && t.data.question ? ((a = t.data.inApp) == null ? void 0 : a.adUnit) === S.STANDART ? /* @__PURE__ */ n(x, {
+  }, [r, e]), !T || !e ? null : n && t && t.type === g.QUESTION_RESOLVED && t.data.questionType === Q.PREDICTION && t.data.question ? ((a = t.data.inApp) == null ? void 0 : a.adUnit) === S.STANDART ? /* @__PURE__ */ i(U, {
+    className: "SL-CardNotificationWebOs",
     action: t.action,
@@ -47,19 +48,21 @@ close: t.close,
     inApp: t.data.inApp
-  }) : /* @__PURE__ */ n(U, {
+  }) : /* @__PURE__ */ i(h, {
+    className: "SL-CardNotificationWebOs",
     action: t.action,
     close: t.close,
     ...t.data.question
-  }) : i && t && ((s = t.data.inApp) == null ? void 0 : s.adUnit) === S.STANDART ? /* @__PURE__ */ n(w, {
+  }) : n && t && ((s = t.data.inApp) == null ? void 0 : s.adUnit) === S.STANDART ? /* @__PURE__ */ i(W, {
+    className: "SL-CardNotificationWebOs",
     ...t.data,
     action: t.action,
     close: t.close,
-    color: ((c = (u = (p = t == null ? void 0 : t.data) == null ? void 0 : p.inApp) == null ? void 0 : u.notification) == null ? void 0 : c.indicatorColor) || ((d = (f = (m = t == null ? void 0 : t.data) == null ? void 0 : m.inApp) == null ? void 0 : f.appearance) == null ? void 0 : d.primaryColor) || "",
+    color: ((u = (c = (p = t == null ? void 0 : t.data) == null ? void 0 : p.inApp) == null ? void 0 : c.notification) == null ? void 0 : u.indicatorColor) || ((f = (d = (m = t == null ? void 0 : t.data) == null ? void 0 : m.inApp) == null ? void 0 : d.appearance) == null ? void 0 : f.primaryColor) || "",
     webos: !0
-  }) : i ? null : /* @__PURE__ */ n(j, {
+  }) : n ? null : /* @__PURE__ */ i(P, {
     hiding: y,
-    onAnimationEnd: I,
-    children: /* @__PURE__ */ n(O, {
+    onAnimationEnd: N,
+    children: /* @__PURE__ */ i(q, {
       sdk: o,
       gamification: e,
-      className: "webos",
+      className: "SL-CardWebOs",
       webos: !0
@@ -66,0 +69,0 @@ })

lib/app/webos/ui/Sidebar/index.js

@@ -1,14 +0,14 @@
-import { jsx as d, jsxs as l, Fragment as F } from "react/jsx-runtime";
-import { updateAllLayouts as ee } from "@noriginmedia/norigin-spatial-navigation";
-import { withFocusable as oe } from "../../useTvButton.js";
-import { useRef as k, useState as I, useEffect as h } from "react";
-import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as i, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
-import { SvgIcon as T } from "../../../../ui/icons/index.js";
-import { PromoAction as ae } from "./PromoAction.js";
-import { Wrap as ne, Container as re, Header as ie, BrandBlock as le, LogoIcon as pe, BrandText as se, BrandNameContainer as ce, BrandName as ye, Sponsored as ue, CloseIcon as me, VideoBlock as he, VideoWrapper as Ae, FocusableVideo as Be, VideoStatus as O, Title as Ie, Description as be, CloseButton as Me } from "./styles.js";
-const Re = oe(Me, {
+import { jsx as d, jsxs as r } from "react/jsx-runtime";
+import { updateAllLayouts as E } from "@noriginmedia/norigin-spatial-navigation";
+import { withFocusable as ee } from "../../useTvButton.js";
+import { useRef as O, useState as V, useEffect as h } from "react";
+import { eventBus as s } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as B, AutoPlayVideo as oe, PlayVideoMuted as te } from "@streamlayer/sdk-web-types";
+import { SvgIcon as j } from "../../../../ui/icons/index.js";
+import { PromoAction as de } from "./PromoAction.js";
+import { Wrap as ae, Container as ne, Header as re, BrandBlock as ie, LogoIcon as le, BrandText as se, BrandNameContainer as pe, BrandName as ce, Sponsored as ue, CloseIcon as me, Content as ye, VideoBlock as he, VideoWrapper as be, FocusableVideo as fe, VideoStatus as G, ContentWrap as Ve, Title as Be, Description as Me, CloseButton as Ae } from "./styles.js";
+const Re = ee(Ae, {
   isFocusBoundary: !0
-}), Ce = (j) => {
-  var N, _, w, P, S, g, L, C, G, D, x, U, v, W;
+}), De = (H) => {
+  var P, C, S, N, g, v, x, D, U, W, L, k, T, _;
   const {
@@ -18,37 +18,37 @@ promotion: e,
     togglePause: a,
-    controlVideo: s,
-    promotionId: r,
-    onClose: b,
-    markAsViewed: A,
-    advertisementPaused: H,
+    controlVideo: p,
+    promotionId: i,
+    onClose: M,
+    markAsViewed: b,
+    advertisementPaused: $,
     isEventFired: o,
     fireEvent: t,
-    muted: $
-  } = j, q = k(null), B = k(null), [M, z] = I(0), K = e.type === i.INGAME_IAB11_LBAR ? M : M / 2, R = !!((_ = (N = e.banner) == null ? void 0 : N.video) != null && _.url), y = e.autoPlayVideo === te.ENABLED, V = e.playVideoMuted === de.ENABLED, Q = V && y, J = e.type === i.INGAME_IAB11_LBAR || e.type === i.INGAME_IAB11 || e.type === i.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
-  let u = (w = e.banner) == null ? void 0 : w.url;
-  return u && !u.startsWith("http") && (u = `https://${u}`), h(() => {
-    if (!B.current) return;
-    const n = new ResizeObserver(([m]) => {
-      const E = m.contentRect.width;
-      z(E);
+    muted: q
+  } = H, z = O(null), f = O(null), [A, K] = V(0), l = e.type === B.INGAME_IAB11_LBAR || e.type === B.INGAME_IAB11 || e.type === B.INGAME_IAB11_SIDEBAR, Q = l ? A + 1 : A / 2, R = !!((C = (P = e.banner) == null ? void 0 : P.video) != null && C.url), u = e.autoPlayVideo === oe.ENABLED, w = e.playVideoMuted === te.ENABLED, J = w && u, [I, X] = V(!0), [Y, Z] = V(void 0);
+  let m = (S = e.banner) == null ? void 0 : S.url;
+  return m && !m.startsWith("http") && (m = `https://${m}`), h(() => {
+    if (!f.current) return;
+    const n = new ResizeObserver(([y]) => {
+      const F = y.contentRect.width;
+      K(F);
     });
-    return n.observe(B.current), ee(), () => {
+    return n.observe(f.current), E(), () => {
       n.disconnect();
     };
   }, []), h(() => {
-    a == null || a(R || y), c == null || c();
-  }, [R, y, c, a]), h(() => {
-    r && e.type && A && A();
-  }, [r, e.type, A]), h(() => () => {
-    s == null || s({ muted: !1 });
-  }, [s]), /* @__PURE__ */ d(ne, { children: /* @__PURE__ */ l(re, { ref: B, children: [
-    /* @__PURE__ */ l(ie, { children: [
-      e.logoMode === 1 && /* @__PURE__ */ l(le, { children: [
-        /* @__PURE__ */ d(pe, { src: (P = e.sponsor) == null ? void 0 : P.logo, alt: "Logo" }),
-        /* @__PURE__ */ l(se, { children: [
-          /* @__PURE__ */ d(ce, { children: /* @__PURE__ */ d(ye, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
+    a == null || a(R || u), c == null || c();
+  }, [R, u, c, a]), h(() => {
+    i && e.type && b && b();
+  }, [i, e.type, b]), h(() => () => {
+    p == null || p({ muted: !1 });
+  }, [p]), /* @__PURE__ */ d(ae, { children: /* @__PURE__ */ r(ne, { ref: f, children: [
+    /* @__PURE__ */ r(re, { children: [
+      e.logoMode === 1 && /* @__PURE__ */ r(ie, { children: [
+        /* @__PURE__ */ d(le, { src: (N = e.sponsor) == null ? void 0 : N.logo, alt: "Logo" }),
+        /* @__PURE__ */ r(se, { children: [
+          /* @__PURE__ */ d(pe, { children: /* @__PURE__ */ d(ce, { children: (g = e.sponsor) == null ? void 0 : g.name }) }),
           /* @__PURE__ */ d(ue, { children: "SPONSORED" })
         ] })
       ] }),
-      e.logoMode === 2 && e.type === i.INGAME_IAB11_LBAR && /* @__PURE__ */ d("img", { src: (g = e.sponsor) == null ? void 0 : g.logo, alt: "Video paused preview", style: { height: "56px" } }),
+      e.logoMode === 2 && l && /* @__PURE__ */ d("img", { src: (v = e.sponsor) == null ? void 0 : v.logo, alt: "Video paused preview", style: { height: "56px" } }),
       /* @__PURE__ */ d(
@@ -60,3 +60,3 @@ Re,
           webos: !0,
-          onClick: b,
+          onClick: M,
           "data-close-btn": "true",
@@ -67,6 +67,6 @@ children: /* @__PURE__ */ d(me, {})
     ] }),
-    e.logoMode === 2 && e.type !== i.INGAME_IAB11_LBAR && /* @__PURE__ */ d(
+    e.logoMode === 2 && !l && /* @__PURE__ */ d(
       "img",
       {
-        src: (L = e.sponsor) == null ? void 0 : L.logo,
+        src: (x = e.sponsor) == null ? void 0 : x.logo,
         alt: "Video paused preview",
@@ -81,109 +81,113 @@ style: {
     ),
-    ((C = e.banner) == null ? void 0 : C.imageUrl) && /* @__PURE__ */ d(he, { style: { height: K }, children: /* @__PURE__ */ d(
-      "img",
-      {
-        src: (G = e.banner) == null ? void 0 : G.imageUrl,
-        alt: "Video paused preview",
-        style: { width: "100%", height: "100%", objectFit: "cover" }
-      }
-    ) }),
-    ((D = e.banner) == null ? void 0 : D.video) && /* @__PURE__ */ l(Ae, { children: [
-      /* @__PURE__ */ d(
-        Be,
+    /* @__PURE__ */ r(ye, { "data-format11": l, children: [
+      ((D = e.banner) == null ? void 0 : D.imageUrl) && /* @__PURE__ */ d(he, { style: { height: Q }, children: /* @__PURE__ */ d(
+        "img",
         {
-          source: e.banner.video.url,
-          poster: (U = (x = e.banner) == null ? void 0 : x.video) == null ? void 0 : U.thumbnailUrl,
-          webos: !0,
-          aspectRatio: J ? "1/1" : "2/1",
-          ref: q,
-          onRender: () => {
-            o != null && o("video-rendered") || (p.emit("advertisement", {
-              action: "videoRendered",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("video-rendered"));
-          },
-          onQuartile: (n) => {
-            o != null && o(`video-quartile-${n}`) || (p.emit("advertisement", {
-              action: "quartileCompleted",
-              payload: {
-                id: r,
-                type: e.type,
-                quartile: n
-              }
-            }), t == null || t(`video-quartile-${n}`));
-          },
-          onMute: (n) => {
-            const m = n ? "muted" : "unmuted";
-            o != null && o(m) || (p.emit("advertisement", {
-              action: n ? "videoMuted" : "videoUnmuted",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t(m)), Z(n);
-          },
-          onPause: () => {
-            a == null || a(!0), X(!1);
-          },
-          onReplay: () => {
-            o != null && o("replayed") || (p.emit("advertisement", {
-              action: "videoReplayed",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("replayed"));
-          },
-          onPlay: () => {
-            o != null && o("played") || (p.emit("advertisement", {
-              action: "videoPlay",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("played")), a == null || a(!1), o != null && o("played") && (o != null && o("ended")) && !(o != null && o("replayed")) && (p.emit("advertisement", {
-              action: "videoReplayed",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("replayed"));
-          },
-          onEnd: () => {
-            o != null && o("ended") || (p.emit("advertisement", {
-              action: "videoEnd",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("ended"));
-          },
-          muted: $,
-          autoPlay: y,
-          playMuted: V,
-          controlVideo: s,
-          hasNotPausedVideo: f
+          src: (U = e.banner) == null ? void 0 : U.imageUrl,
+          alt: "Video paused preview",
+          style: { width: "100%", height: "100%", objectFit: "cover" }
         }
-      ),
-      H && !f && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(T, { name: "icon-pause" }),
-        "PAUSED"
+      ) }),
+      ((W = e.banner) == null ? void 0 : W.video) && /* @__PURE__ */ r(be, { children: [
+        /* @__PURE__ */ d(
+          fe,
+          {
+            source: e.banner.video.url,
+            poster: (k = (L = e.banner) == null ? void 0 : L.video) == null ? void 0 : k.thumbnailUrl,
+            webos: !0,
+            aspectRatio: l ? "1/1" : "2/1",
+            ref: z,
+            onRender: () => {
+              o != null && o("video-rendered") || (s.emit("advertisement", {
+                action: "videoRendered",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("video-rendered"));
+            },
+            onQuartile: (n) => {
+              o != null && o(`video-quartile-${n}`) || (s.emit("advertisement", {
+                action: "quartileCompleted",
+                payload: {
+                  id: i,
+                  type: e.type,
+                  quartile: n
+                }
+              }), t == null || t(`video-quartile-${n}`));
+            },
+            onMute: (n) => {
+              const y = n ? "muted" : "unmuted";
+              o != null && o(y) || (s.emit("advertisement", {
+                action: n ? "videoMuted" : "videoUnmuted",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t(y)), Z(n);
+            },
+            onPause: () => {
+              a == null || a(!0), X(!1);
+            },
+            onReplay: () => {
+              o != null && o("replayed") || (s.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("replayed"));
+            },
+            onPlay: () => {
+              o != null && o("played") || (s.emit("advertisement", {
+                action: "videoPlay",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("played")), a == null || a(!1), o != null && o("played") && (o != null && o("ended")) && !(o != null && o("replayed")) && (s.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("replayed"));
+            },
+            onEnd: () => {
+              o != null && o("ended") || (s.emit("advertisement", {
+                action: "videoEnd",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("ended"));
+            },
+            muted: q,
+            autoPlay: u,
+            playMuted: w,
+            controlVideo: p,
+            hasNotPausedVideo: I
+          }
+        ),
+        $ && !I && /* @__PURE__ */ r(G, { children: [
+          /* @__PURE__ */ d(j, { name: "icon-pause" }),
+          "PAUSED"
+        ] }),
+        Y && J && /* @__PURE__ */ r(G, { children: [
+          /* @__PURE__ */ d(j, { name: "iconMute" }),
+          "MUTED"
+        ] })
       ] }),
-      Y && Q && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(T, { name: "iconMute" }),
-        "MUTED"
+      /* @__PURE__ */ r(Ve, { "data-format11": l, children: [
+        !l && /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ d(Be, { children: (T = e.banner) == null ? void 0 : T.title }),
+          /* @__PURE__ */ d(Me, { children: (_ = e.banner) == null ? void 0 : _.body })
+        ] }),
+        /* @__PURE__ */ d(de, { promotion: e, onClose: M })
       ] })
-    ] }),
-    e.type !== i.INGAME_IAB11 && e.type !== i.INGAME_IAB11_LBAR && e.type !== i.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(F, { children: [
-      /* @__PURE__ */ d(Ie, { children: (v = e.banner) == null ? void 0 : v.title }),
-      /* @__PURE__ */ d(be, { children: (W = e.banner) == null ? void 0 : W.body })
-    ] }),
-    /* @__PURE__ */ d(ae, { promotion: e, onClose: b })
+    ] })
   ] }) });
 };
 export {
-  Ce as TVSidebar
+  De as TVSidebar
 };

lib/app/webos/ui/Sidebar/styles.d.ts

 import { default as React } from 'react';
 export declare const Wrap: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Container: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ContentWrap: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Header: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -5,0 +7,0 @@ export declare const BrandBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

lib/app/webos/ui/Sidebar/styles.js

@@ -15,30 +15,38 @@ import { jsx as o } from "react/jsx-runtime";
 }), k = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "cxfcca1",
+  propsAsIs: !1
+}), V = /* @__PURE__ */ s("div")({
+  name: "ContentWrap",
+  class: "cz4xk2s",
+  propsAsIs: !1
+}), Q = /* @__PURE__ */ s("div")({
   name: "Header",
-  class: "hxfcca1",
+  class: "h1udizru",
   propsAsIs: !1
-}), V = /* @__PURE__ */ s("div")({
+}), y = /* @__PURE__ */ s("div")({
   name: "BrandBlock",
-  class: "bz4xk2s",
+  class: "b1keaj5j",
   propsAsIs: !1
-}), Q = /* @__PURE__ */ s("img")({
+}), S = /* @__PURE__ */ s("img")({
   name: "LogoIcon",
-  class: "l1udizru",
+  class: "l17io0yd",
   propsAsIs: !1
-}), y = /* @__PURE__ */ s("div")({
+}), T = /* @__PURE__ */ s("div")({
   name: "BrandText",
-  class: "b1keaj5j",
+  class: "b4ldrvh",
   propsAsIs: !1
-}), S = /* @__PURE__ */ s("div")({
+}), M = /* @__PURE__ */ s("div")({
   name: "BrandNameContainer",
-  class: "b17io0yd",
+  class: "bxfmzcm",
   propsAsIs: !1
-}), T = /* @__PURE__ */ s("span")({
+}), _ = /* @__PURE__ */ s("span")({
   name: "BrandName",
-  class: "b4ldrvh",
+  class: "baubznb",
   propsAsIs: !1
-}), M = /* @__PURE__ */ s("span")({
+}), j = /* @__PURE__ */ s("span")({
   name: "Sponsored",
-  class: "sxfmzcm",
+  class: "s1n8ue7o",
   propsAsIs: !1
-}), _ = (e) => /* @__PURE__ */ o("svg", {
+}), H = (e) => /* @__PURE__ */ o("svg", {
   viewBox: "0 0 24 24",
@@ -53,35 +61,35 @@ fill: "white",
   })
-}), q = /* @__PURE__ */ s("button")({
+}), W = /* @__PURE__ */ s("button")({
   name: "CloseButton",
-  class: "caubznb",
+  class: "cexkm55",
   propsAsIs: !1
-}), f = () => d, H = /* @__PURE__ */ s(f())({
+}), f = () => d, q = /* @__PURE__ */ s(f())({
   name: "FocusableVideo",
-  class: "f1n8ue7o",
+  class: "filh2qp",
   propsAsIs: !0
-}), j = /* @__PURE__ */ s("div")({
+}), D = /* @__PURE__ */ s("div")({
   name: "VideoWrapper",
-  class: "vexkm55",
+  class: "v1x04fia",
   propsAsIs: !1
 }), m = () => ({
   isPlaying: e
-}) => e ? "none" : "block", W = /* @__PURE__ */ s("button")({
+}) => e ? "none" : "block", P = /* @__PURE__ */ s("button")({
   name: "PlayPauseButton",
-  class: "pilh2qp",
+  class: "p15di30w",
   propsAsIs: !1,
   vars: {
-    "pilh2qp-0": [m()]
+    "p15di30w-0": [m()]
   }
 }), v = () => ({
   visible: e
-}) => e ? "flex" : "none", D = /* @__PURE__ */ s("div")({
+}) => e ? "flex" : "none", Z = /* @__PURE__ */ s("div")({
   name: "CenterIndicator",
-  class: "c1x04fia",
+  class: "cui9wi2",
   propsAsIs: !1,
   vars: {
-    "c1x04fia-0": [v()]
+    "cui9wi2-0": [v()]
   }
-}), P = /* @__PURE__ */ s("div")({
+}), z = /* @__PURE__ */ s("div")({
   name: "VideoBlock",
-  class: "v15di30w",
+  class: "vddh3kx",
   propsAsIs: !1
@@ -92,11 +100,11 @@ }), I = () => ({
   textColor: e
-}) => e || "#fff", Z = /* @__PURE__ */ s("div")({
+}) => e || "#fff", N = /* @__PURE__ */ s("div")({
   name: "SendToUserButton",
-  class: "sui9wi2",
+  class: "s13i81d3",
   propsAsIs: !1,
   vars: {
-    "sui9wi2-0": [I()],
-    "sui9wi2-1": [x()]
+    "s13i81d3-0": [I()],
+    "s13i81d3-1": [x()]
   }
-}), z = () => /* @__PURE__ */ o("svg", {
+}), U = () => /* @__PURE__ */ o("svg", {
   fill: "white",
@@ -116,48 +124,48 @@ style: {
   })
-}), N = /* @__PURE__ */ s("div")({
+}), F = /* @__PURE__ */ s("div")({
   name: "SendToUserText",
-  class: "sddh3kx",
+  class: "s1vr1bii",
   propsAsIs: !1
-}), U = /* @__PURE__ */ s("div")({
+}), $ = /* @__PURE__ */ s("div")({
   name: "VideoStatus",
-  class: "v13i81d3",
+  class: "v1st3522",
   propsAsIs: !1
-}), F = /* @__PURE__ */ s("h2")({
+}), E = /* @__PURE__ */ s("h2")({
   name: "Title",
-  class: "t1vr1bii",
+  class: "tjnj4vf",
   propsAsIs: !1
-}), $ = /* @__PURE__ */ s("p")({
+}), G = /* @__PURE__ */ s("p")({
   name: "Description",
-  class: "d1st3522",
+  class: "d1bj8s6q",
   propsAsIs: !1
-}), E = /* @__PURE__ */ s("div")({
+}), J = /* @__PURE__ */ s("div")({
   name: "QRBlock",
-  class: "qjnj4vf",
+  class: "q1nyi744",
   propsAsIs: !1
-}), G = /* @__PURE__ */ s("div")({
+}), K = /* @__PURE__ */ s("div")({
   name: "QRDescBlock",
-  class: "q1bj8s6q",
+  class: "q1ri138g",
   propsAsIs: !1
-}), J = /* @__PURE__ */ s("div")({
+}), O = /* @__PURE__ */ s("div")({
   name: "LearnMore",
-  class: "l1nyi744",
+  class: "l1asn3je",
   propsAsIs: !1
-}), K = /* @__PURE__ */ s("div")({
+}), X = /* @__PURE__ */ s("div")({
   name: "QRHint",
-  class: "q1ri138g",
+  class: "qa9pwin",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "QRWrapper",
-  class: "q1asn3je",
+  class: "q1j7gm7x",
   propsAsIs: !1
-}), A = () => i, B = /* @__PURE__ */ s(A())({
+}), C = () => i, u = /* @__PURE__ */ s(C())({
   name: "StyledQRCode",
-  class: "sa9pwin",
+  class: "s1sb0ho1",
   propsAsIs: !0
-}), O = p.forwardRef(({
+}), Y = p.forwardRef(({
   value: e,
   size: a = 200,
   fgColor: n = "#0f172a",
-  bgColor: r = "#ffffff",
-  level: t = "M",
+  bgColor: t = "#ffffff",
+  level: r = "M",
   tabIndex: l = 0
@@ -174,9 +182,9 @@ }, c) => /* @__PURE__ */ o("a", {
   tabIndex: l,
-  children: /* @__PURE__ */ o(u, {
-    children: /* @__PURE__ */ o(B, {
+  children: /* @__PURE__ */ o(A, {
+    children: /* @__PURE__ */ o(u, {
       value: e,
       size: a,
       fgColor: n,
-      bgColor: r,
-      level: t,
+      bgColor: t,
+      level: r,
       viewBox: `0 0 ${a} ${a}`
@@ -187,29 +195,31 @@ })
 export {
-  V as BrandBlock,
-  T as BrandName,
-  S as BrandNameContainer,
-  y as BrandText,
-  D as CenterIndicator,
-  q as CloseButton,
-  _ as CloseIcon,
+  y as BrandBlock,
+  _ as BrandName,
+  M as BrandNameContainer,
+  T as BrandText,
+  Z as CenterIndicator,
+  W as CloseButton,
+  H as CloseIcon,
   g as Container,
-  $ as Description,
-  z as EnvelopeIcon,
-  H as FocusableVideo,
-  k as Header,
-  J as LearnMore,
-  Q as LogoIcon,
-  W as PlayPauseButton,
-  O as QR,
-  E as QRBlock,
-  G as QRDescBlock,
-  K as QRHint,
-  Z as SendToUserButton,
-  N as SendToUserText,
-  M as Sponsored,
-  F as Title,
-  P as VideoBlock,
-  U as VideoStatus,
-  j as VideoWrapper,
+  k as Content,
+  V as ContentWrap,
+  G as Description,
+  U as EnvelopeIcon,
+  q as FocusableVideo,
+  Q as Header,
+  O as LearnMore,
+  S as LogoIcon,
+  P as PlayPauseButton,
+  Y as QR,
+  J as QRBlock,
+  K as QRDescBlock,
+  X as QRHint,
+  N as SendToUserButton,
+  F as SendToUserText,
+  j as Sponsored,
+  E as Title,
+  z as VideoBlock,
+  $ as VideoStatus,
+  D as VideoWrapper,
   b as Wrap
 };

lib/ui/advertiseme.../externalAd/vast-player/useGAMPlayer.js

@@ -5,3 +5,3 @@ import { VASTTracker as R } from "@dailymotion/vast-client";
 import { useVastAds as x } from "./useVastAds.js";
-import { m as D } from "../../../../../index-DSi8Qgfs.js";
+import { m as D } from "../../../../../index-Fv2CC2QU.js";
 const V = (u) => {
@@ -8,0 +8,0 @@ const c = b();

lib/ui/advertiseme...ay/externalAd/vast-player/useVastAds.js

@@ -5,3 +5,3 @@ import { VASTClient as R } from "@dailymotion/vast-client";
 import { v4 as S, validate as L, v5 as y } from "uuid";
-import { a as F } from "../../../../../index-tnt2CtQe.js";
+import { a as F } from "../../../../../index-Deo5_bIg.js";
 const N = (a, s) => {
@@ -8,0 +8,0 @@ const o = goog.pal, c = new o.ConsentSettings();

lib/ui/gamificatio.../notification/AdNotification/index.d.ts

@@ -7,4 +7,5 @@ import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
     webos?: boolean;
+    className?: string;
 };
 export declare const InAppNotification: React.FC<InAppProps>;
 export {};

lib/ui/gamificatio...pp/notification/AdNotification/index.js

 import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { cx as Q } from "@linaria/core";
 import { withFocusable as D } from "../../../../../../app/webos/useTvButton.js";
-import { useState as Q, useRef as x, useEffect as R } from "react";
-import { QuestionType as d, NotificationUseContentMedia as w, QuestionStatus as W } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as j } from "../../../../constants.js";
-import { QuestionTypeHeader as P } from "../../../index.js";
-import { NotificationMedia as O } from "./NotificationMedia/index.js";
-import { NotificationContainer as y, LogoImgContainer as H, LogoImg as S, NotificationContent as E, MainContent as _, StyledChevronRight as h, TVButtons as z, Body as G, Title as J, Description as K, DismissButton as X, AnswerButton as Y, NotificationInterstitialContainer as Z } from "./styles.js";
-const $ = ({ title: a, questionType: c, questionTypeData: e, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ u(G, { imageMode: t, questionType: c, webos: n, children: [
+import { useState as R, useRef as W, useEffect as j } from "react";
+import { QuestionType as l, NotificationUseContentMedia as O, QuestionStatus as P } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as y } from "../../../../constants.js";
+import { QuestionTypeHeader as H } from "../../../index.js";
+import { NotificationMedia as S } from "./NotificationMedia/index.js";
+import { NotificationContainer as _, LogoImgContainer as h, LogoImg as E, NotificationContent as b, MainContent as z, StyledChevronRight as G, TVButtons as J, Body as K, Title as X, Description as Y, DismissButton as Z, AnswerButton as $, NotificationInterstitialContainer as q } from "./styles.js";
+const g = ({ title: a, questionType: c, questionTypeData: e, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ u(K, { imageMode: t, questionType: c, webos: n, children: [
   /* @__PURE__ */ r(
-    P,
+    H,
     {
       questionTypeData: e,
       questionType: c,
-      questionStatus: W.UNSET
+      questionStatus: P.UNSET
     }
   ),
-  a && /* @__PURE__ */ r(J, { webos: n, children: a }),
-  o && /* @__PURE__ */ r(K, { children: o })
-] }), q = D(Z), g = D(X), A = D(Y), p = ({
-  sponsorLogo: a,
-  onClick: c,
-  webos: e
-}) => /* @__PURE__ */ r(q, { autoFocus: !0, webos: e, onClick: c, "data-webos": e, children: /* @__PURE__ */ r(E, { withoutPadding: !0, children: /* @__PURE__ */ r(S, { src: a }) }) }), uo = ({
+  a && /* @__PURE__ */ r(X, { webos: n, children: a }),
+  o && /* @__PURE__ */ r(Y, { children: o })
+] }), A = D(q), p = D(Z), oo = D($), to = ({
+  className: a,
+  sponsorLogo: c,
+  onClick: e,
+  webos: o
+}) => /* @__PURE__ */ r(
+  A,
+  {
+    className: a,
+    autoFocus: !0,
+    webos: o,
+    onClick: e,
+    "data-webos": o,
+    children: /* @__PURE__ */ r(b, { withoutPadding: !0, children: /* @__PURE__ */ r(E, { src: c }) })
+  }
+), io = ({
   action: a,
@@ -31,16 +43,18 @@ close: c,
   color: n,
-  webos: s
+  webos: s,
+  className: L
 }) => {
-  var T, B, F;
-  const [b, m] = Q(!1), L = x();
-  R(() => (o != null && o.sponsorLogo && (m(!0), L.current = setTimeout(() => {
+  var B, F, w;
+  const [v, m] = R(!1), N = W();
+  j(() => (o != null && o.sponsorLogo && (m(!0), N.current = setTimeout(() => {
     m(!1);
-  }, 5e3)), () => clearTimeout(L.current)), [o == null ? void 0 : o.sponsorLogo]);
-  const N = j[e];
-  if (!N || !o || !o.notification)
+  }, 5e3)), () => clearTimeout(N.current)), [o == null ? void 0 : o.sponsorLogo]);
+  const T = y[e];
+  if (!T || !o || !o.notification)
     return null;
-  const { title: v, image: M, imageMode: i, useContentMedia: f } = o.notification, U = e === d.FACTOID ? t == null ? void 0 : t.heading : v, V = e === d.FACTOID ? t == null ? void 0 : t.body : "", k = M, C = e === d.FACTOID && ((T = t == null ? void 0 : t.video) == null ? void 0 : T.url) && (o == null ? void 0 : o.isVideo) && f === w.ENABLED, I = f === w.ENABLED ? C ? (B = t == null ? void 0 : t.video) == null ? void 0 : B.url : t == null ? void 0 : t.image : "";
-  return o != null && o.sponsorLogo && b ? /* @__PURE__ */ r(
-    p,
+  const { title: M, image: U, imageMode: i, useContentMedia: f } = o.notification, V = e === l.FACTOID ? t == null ? void 0 : t.heading : M, k = e === l.FACTOID ? t == null ? void 0 : t.body : "", x = U, C = e === l.FACTOID && ((B = t == null ? void 0 : t.video) == null ? void 0 : B.url) && (o == null ? void 0 : o.isVideo) && f === O.ENABLED, I = f === O.ENABLED ? C ? (F = t == null ? void 0 : t.video) == null ? void 0 : F.url : t == null ? void 0 : t.image : "";
+  return o != null && o.sponsorLogo && v ? /* @__PURE__ */ r(
+    to,
     {
+      className: L,
       sponsorLogo: o == null ? void 0 : o.sponsorLogo,
@@ -51,18 +65,18 @@ webos: s,
   ) : /* @__PURE__ */ u(
-    y,
+    _,
     {
       "data-a": "intr",
-      className: "SL_InApp",
-      onClick: (l) => {
-        s || a == null || a(l);
+      className: Q("SL_InApp", L),
+      onClick: (d) => {
+        s || a == null || a(d);
       },
-      "data-is-insight": e === d.FACTOID,
+      "data-is-insight": e === l.FACTOID,
       "data-webos": s,
       children: [
-        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(S, { src: o == null ? void 0 : o.sponsorLogo }) }),
-        /* @__PURE__ */ u(E, { children: [
-          /* @__PURE__ */ u(_, { children: [
-            !I && /* @__PURE__ */ r(O, { src: k, imageMode: i, withVideo: !!C, color: n }),
+        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(E, { src: o == null ? void 0 : o.sponsorLogo }) }),
+        /* @__PURE__ */ u(b, { children: [
+          /* @__PURE__ */ u(z, { children: [
+            !I && /* @__PURE__ */ r(S, { src: x, imageMode: i, withVideo: !!C, color: n }),
             I && /* @__PURE__ */ r(
-              O,
+              S,
               {
@@ -74,12 +88,12 @@ src: I,
                 useContentMedia: f,
-                thumbnailUrl: (F = t == null ? void 0 : t.video) == null ? void 0 : F.thumbnailUrl
+                thumbnailUrl: (w = t == null ? void 0 : t.video) == null ? void 0 : w.thumbnailUrl
               }
             ),
             /* @__PURE__ */ r(
-              $,
+              g,
               {
-                questionTypeData: N,
+                questionTypeData: T,
                 questionType: e,
-                title: U,
-                description: V,
+                title: V,
+                description: k,
                 imageMode: i,
@@ -90,11 +104,11 @@ webos: s
           ] }),
-          !s && /* @__PURE__ */ r(h, { name: "chevronRight" }),
-          s && /* @__PURE__ */ u(z, { children: [
+          !s && /* @__PURE__ */ r(G, { name: "chevronRight" }),
+          s && /* @__PURE__ */ u(J, { children: [
             /* @__PURE__ */ r(
-              g,
+              p,
               {
                 webos: !0,
                 "data-close-btn": "true",
-                onClick: (l) => {
-                  l.stopPropagation(), c == null || c(l);
+                onClick: (d) => {
+                  d.stopPropagation(), c == null || c(d);
                 },
@@ -104,3 +118,3 @@ children: "Dismiss"
             ),
-            /* @__PURE__ */ r(A, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
+            /* @__PURE__ */ r(oo, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
           ] })
@@ -113,3 +127,3 @@ ] })
 export {
-  uo as InAppNotification
+  io as InAppNotification
 };

lib/ui/gamificatio...n/inapp/prediction-result-ad/index.d.ts

@@ -6,2 +6,3 @@ import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
 export declare const InAppPredictionResultAd: React.FC<Exclude<InAppProps['question'], undefined> & {
+    className?: string;
     action?: () => void;
@@ -8,0 +9,0 @@ close?: () => void;

lib/ui/gamificatio...ion/inapp/prediction-result-ad/index.js

@@ -1,20 +0,31 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useState as d, useRef as g, useEffect as h } from "react";
-import { PredictionResult as L } from "./frames/index.js";
-import { NotificationContainer as A, LogoImgContainer as I, LogoImg as m, NotificationInterstitialContainer as C, NotificationContent as N } from "./styles.js";
-const w = ({ sponsorLogo: r, onClick: t }) => /* @__PURE__ */ o(C, { onClick: t, children: /* @__PURE__ */ o(N, { withoutPadding: !0, children: /* @__PURE__ */ o(m, { src: r }) }) }), j = (r) => {
-  var n, c, a, e, l;
-  const [t, i] = d(!1), p = g();
-  return h(() => {
-    var f;
-    return (f = r == null ? void 0 : r.inApp) != null && f.sponsorLogo && (i(!0), p.current = setTimeout(() => {
-      i(!1);
-    }, 5e3)), () => clearTimeout(p.current);
-  }, [(n = r == null ? void 0 : r.inApp) == null ? void 0 : n.sponsorLogo]), (c = r == null ? void 0 : r.inApp) != null && c.sponsorLogo && t ? /* @__PURE__ */ o(w, { sponsorLogo: (a = r.inApp) == null ? void 0 : a.sponsorLogo, onClick: () => i(!1) }) : /* @__PURE__ */ o(A, { children: /* @__PURE__ */ s("div", { children: [
-    ((e = r == null ? void 0 : r.inApp) == null ? void 0 : e.sponsorLogo) && /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(m, { src: (l = r == null ? void 0 : r.inApp) == null ? void 0 : l.sponsorLogo }) }),
-    /* @__PURE__ */ o(L, { ...r })
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as s, useRef as h, useEffect as L } from "react";
+import { PredictionResult as A } from "./frames/index.js";
+import { NotificationContainer as I, LogoImgContainer as C, LogoImg as g, NotificationInterstitialContainer as w, NotificationContent as x } from "./styles.js";
+const N = ({
+  className: t,
+  sponsorLogo: r,
+  onClick: i
+}) => /* @__PURE__ */ o(w, { className: t, onClick: i, children: /* @__PURE__ */ o(x, { withoutPadding: !0, children: /* @__PURE__ */ o(g, { src: r }) }) }), S = ({ className: t, ...r }) => {
+  var c, e, a, f, l;
+  const [i, p] = s(!1), n = h();
+  return L(() => {
+    var d;
+    return (d = r == null ? void 0 : r.inApp) != null && d.sponsorLogo && (p(!0), n.current = setTimeout(() => {
+      p(!1);
+    }, 5e3)), () => clearTimeout(n.current);
+  }, [(c = r == null ? void 0 : r.inApp) == null ? void 0 : c.sponsorLogo]), (e = r == null ? void 0 : r.inApp) != null && e.sponsorLogo && i ? /* @__PURE__ */ o(
+    N,
+    {
+      className: t,
+      sponsorLogo: (a = r.inApp) == null ? void 0 : a.sponsorLogo,
+      onClick: () => p(!1)
+    }
+  ) : /* @__PURE__ */ o(I, { className: t, children: /* @__PURE__ */ m("div", { children: [
+    ((f = r == null ? void 0 : r.inApp) == null ? void 0 : f.sponsorLogo) && /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(g, { src: (l = r == null ? void 0 : r.inApp) == null ? void 0 : l.sponsorLogo }) }),
+    /* @__PURE__ */ o(A, { ...r })
   ] }) });
 };
 export {
-  j as InAppPredictionResultAd
+  S as InAppPredictionResultAd
 };

lib/ui/gamificatio...tion/inapp/prediction-result/index.d.ts

@@ -6,2 +6,3 @@ import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
 export declare const InAppPredictionResult: React.FC<Exclude<InAppProps['question'], undefined> & {
+    className?: string;
     action?: () => void;
@@ -8,0 +9,0 @@ close?: () => void;

lib/ui/gamificatio...estion/inapp/prediction-result/index.js

 import { jsx as o } from "react/jsx-runtime";
-import { PredictionResult as t } from "./frames/index.js";
-import { NotificationContainer as i } from "./styles.js";
-const p = (r) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(t, { ...r }) });
+import { PredictionResult as i } from "./frames/index.js";
+import { NotificationContainer as n } from "./styles.js";
+const c = ({ className: r, ...t }) => /* @__PURE__ */ o(n, { className: r, children: /* @__PURE__ */ o(i, { ...t }) });
 export {
-  p as InAppPredictionResult
+  c as InAppPredictionResult
 };

lib/ui/gamification/vote/insight-details/index.js

 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import { InsightContentTV as e } from "../../../../app/webos/ui/insight/index.js";
 import { InsightContent as m } from "../../../questions/insight/index.js";
-import { Container as k, WebLinkBtn as h, WebLinkIcon as c } from "./styles.js";
-const x = ({ instantView: r, ...o }) => /* @__PURE__ */ b(k, { children: [
-  o.webos ? /* @__PURE__ */ l(e, { instantView: r, ...o, isDetail: !0 }) : /* @__PURE__ */ l(m, { instantView: r, ...o, isDetail: !0 }),
+import { Container as k, WebLinkBtn as h, WebLinkIcon as L } from "./styles.js";
+const u = ({ instantView: r, ...o }) => /* @__PURE__ */ b(k, { children: [
+  o.SL - CardWebOs ? /* @__PURE__ */ l(e, { instantView: r, ...o, isDetail: !0 }) : /* @__PURE__ */ l(m, { instantView: r, ...o, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ b(h, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ l(c, { name: "icon-external-link" })
+    /* @__PURE__ */ l(L, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  x as InsightDetails
+  u as InsightDetails
 };

lib/utils/decorators/container.d.ts

@@ -5,3 +5,4 @@ import { StoryContext, StoryFn } from '@storybook/react';
 export declare const bgContainer: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
+export declare const darkBgContainer: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated */
 export declare const container: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;

lib/utils/decorators/container.js

 import { jsx as e } from "react/jsx-runtime";
 import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
-import { StreamLayerMastersThemeProvider as m } from "../../ui/theme/masters.js";
-import { BGContainer as i, AppContainer as c } from "./styles.js";
-const l = (r, t) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, {}) }), p = (r, t) => {
+import { StreamLayerMastersThemeProvider as i } from "../../ui/theme/masters.js";
+import { BGContainer as m, DarkBGContainer as a, AppContainer as c } from "./styles.js";
+const p = (r, t) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), u = (r, t) => {
   const o = t.globals.theme || "dark";
   return /* @__PURE__ */ e(n, { themeMode: o, children: /* @__PURE__ */ e(r, {}) });
-}, f = (r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), u = (r) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
+}, C = (r) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, {}) }), f = (r) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, {}) }), T = (r) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
 export {
-  f as bgContainer,
-  u as container,
-  l as mastersTheme,
-  p as theme
+  C as bgContainer,
+  T as container,
+  f as darkBgContainer,
+  p as mastersTheme,
+  u as theme
 };

lib/utils/decorators/styles.d.ts

 export declare const AppContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const BGContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DarkBGContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

lib/utils/decorators/styles.js

 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "AppContainer",
   class: "azqfrs3",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "BGContainer",
   class: "b1t42us",
   propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "DarkBGContainer",
+  class: "drqlkba",
+  propsAsIs: !1
 });
 export {
-  a as AppContainer,
-  o as BGContainer
+  n as AppContainer,
+  r as BGContainer,
+  o as DarkBGContainer
 };

package.json

 {
   "name": "@streamlayer/react-ui",
-  "version": "1.33.3",
+  "version": "1.34.0",
   "type": "module",
@@ -89,3 +89,4 @@ "main": "./src/index.js",
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.225.0",
+    "@noriginmedia/norigin-spatial-navigation": "^2.3.0",
+    "@streamlayer/sl-eslib": "^5.228.0",
     "lodash.throttle": "^4.1.1",
@@ -95,3 +96,2 @@ "react-infinite-scroller": "^1.2.6",
     "react-window": "^1.8.10",
-    "@noriginmedia/norigin-spatial-navigation": "^2.3.0",
     "react-window-infinite-loader": "^1.0.9",
@@ -115,15 +115,17 @@ "@dailymotion/vast-client": "^6.4.2",
     "react-phone-number-input": "^3.4.8",
-    "@streamlayer/feature-gamification": "^1.23.8",
-    "@streamlayer/react-polyfills": "^0.1.53",
-    "@streamlayer/sdk-web": "^1.16.8",
-    "@streamlayer/sdk-web-analytics": "^1.14.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.3.8",
-    "@streamlayer/sdk-web-api": "^1.14.8",
-    "@streamlayer/sdk-web-core": "^1.18.3",
-    "@streamlayer/sdk-web-features": "^1.0.93",
-    "@streamlayer/sdk-web-interfaces": "^1.8.8",
-    "@streamlayer/sdk-web-logger": "^1.0.93",
-    "@streamlayer/sdk-web-notifications": "^1.3.55",
-    "@streamlayer/sdk-web-storage": "^1.0.93",
-    "@streamlayer/sdk-web-types": "^1.16.8"
+    "@streamlayer/feature-polymarket": "^0.1.0",
+    "@streamlayer/react-polyfills": "^0.2.0",
+    "@streamlayer/feature-gamification": "^1.24.0",
+    "@streamlayer/sdk-web": "^1.17.0",
+    "@streamlayer/sdk-web-analytics": "^1.15.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.3.9",
+    "@streamlayer/feature-advertisement": "^0.1.0",
+    "@streamlayer/sdk-web-api": "^1.15.0",
+    "@streamlayer/sdk-web-core": "^1.19.0",
+    "@streamlayer/sdk-web-features": "^1.0.94",
+    "@streamlayer/sdk-web-interfaces": "^1.9.0",
+    "@streamlayer/sdk-web-notifications": "^1.3.56",
+    "@streamlayer/sdk-web-storage": "^1.0.94",
+    "@streamlayer/sdk-web-logger": "^1.0.94",
+    "@streamlayer/sdk-web-types": "^1.16.9"
   },
@@ -154,2 +156,3 @@ "nx": {
     "glob": "^11.0.0",
+    "lightweight-charts": "^5.1.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
@@ -156,0 +159,0 @@ "screenfull": "^6.0.2",

lib/index-DSi8Qgfs.js

-import { a as u } from "./index-tnt2CtQe.js";
-let i = (o = {}) => {
-  let e = u(o);
-  return e.setKey = function(a, t) {
-    let l = e.value;
-    typeof t > "u" && a in e.value ? (e.value = { ...e.value }, delete e.value[a], e.notify(l, a)) : e.value[a] !== t && (e.value = {
-      ...e.value,
-      [a]: t
-    }, e.notify(l, a));
-  }, e;
-};
-export {
-  i as m
-};

lib/index-tnt2CtQe.js

-let t = [], i = 0;
-const r = 4;
-let a = (s) => {
-  let f = [], e = {
-    get() {
-      return e.lc || e.listen(() => {
-      })(), e.value;
-    },
-    lc: 0,
-    listen(l) {
-      return e.lc = f.push(l), () => {
-        for (let u = i + r; u < t.length; )
-          t[u] === l ? t.splice(u, r) : u += r;
-        let n = f.indexOf(l);
-        ~n && (f.splice(n, 1), --e.lc || e.off());
-      };
-    },
-    notify(l, n) {
-      let u = !t.length;
-      for (let o of f)
-        t.push(
-          o,
-          e.value,
-          l,
-          n
-        );
-      if (u) {
-        for (i = 0; i < t.length; i += r)
-          t[i](
-            t[i + 1],
-            t[i + 2],
-            t[i + 3]
-          );
-        t.length = 0;
-      }
-    },
-    /* It will be called on last listener unsubscribing.
-       We will redefine it in onMount and onStop. */
-    off() {
-    },
-    set(l) {
-      let n = e.value;
-      n !== l && (e.value = l, e.notify(n));
-    },
-    subscribe(l) {
-      let n = e.listen(l);
-      return l(e.value), n;
-    },
-    value: s
-  };
-  return e;
-};
-export {
-  a
-};

lib/ui/advertiseme...xternalAd/vast-player/useGAMStatic.d.ts

-type GAMStaticCore = Record<string, {
-    id: string;
-    url: string;
-    imageSrc?: string;
-    adUrl?: string;
-}>;
-export declare const useLoadGAMStatic: () => readonly [(adUrl: string) => Promise<{
-    success: boolean;
-}>, import('nanostores').PreinitializedMapStore<GAMStaticCore> & object];
-export {};

lib/ui/advertiseme.../externalAd/vast-player/useGAMStatic.js

-import { VASTClient as x } from "@dailymotion/vast-client";
-import { useRef as P, useCallback as V } from "react";
-import { eventBus as l } from "@streamlayer/sdk-web-interfaces";
-import { createLogger as k } from "@streamlayer/sdk-web-logger";
-import { m as I } from "../../../../../index-DSi8Qgfs.js";
-const K = {}, B = new x(), i = I(K), d = k("ui:gam-static"), b = (n) => new Promise((m, e) => {
-  const r = new Image();
-  r.onload = () => m(n), r.onerror = () => e(), r.src = n;
-}), j = () => {
-  const n = P(0);
-  return [V(async (e) => {
-    var p, g, f, v, y, A, T, S, R, w, h;
-    if ((p = i.get()[e]) != null && p.imageSrc)
-      return { success: !0 };
-    const r = Date.now();
-    n.current = r, i.setKey(e, { id: "", url: e });
-    try {
-      l.emit("exposedPauseAd", {
-        action: "load",
-        payload: {}
-      });
-      const c = await B.get(e);
-      if (d.debug(c, "parsedVAST"), n.current === r && i.get()[e].url) {
-        const t = c.ads.find((s) => s.creatives.length > 0);
-        if (t) {
-          d.debug(t, "validAd");
-          const s = t.creatives.find((o) => o.type === "nonlinear");
-          if (s) {
-            d.debug(s, "nonlinear");
-            const o = (f = (g = s.variations) == null ? void 0 : g[0]) == null ? void 0 : f.staticResource, L = (y = (v = s.variations) == null ? void 0 : v[0]) == null ? void 0 : y.nonlinearClickThroughURLTemplate;
-            if (o)
-              return await b(o), i.setKey(e, {
-                id: t.id || "",
-                url: e,
-                imageSrc: o,
-                adUrl: L
-              }), l.emit("exposedPauseAd", {
-                action: "loaded",
-                payload: {
-                  id: t.id || ""
-                }
-              }), { success: !0 };
-          }
-          const a = t.creatives.find((o) => o.type === "companion");
-          d.debug(a, "companion");
-          const u = (R = (S = (T = (A = a == null ? void 0 : a.variations) == null ? void 0 : A[0]) == null ? void 0 : T.staticResources) == null ? void 0 : S[0]) == null ? void 0 : R.url, C = (h = (w = a == null ? void 0 : a.variations) == null ? void 0 : w[0]) == null ? void 0 : h.companionClickThroughURLTemplate;
-          if (u)
-            return await b(u), i.setKey(e, {
-              id: t.id || "",
-              url: e,
-              imageSrc: u,
-              adUrl: C
-            }), l.emit("exposedPauseAd", {
-              action: "loaded",
-              payload: {
-                id: t.id || ""
-              }
-            }), { success: !0 };
-        }
-      }
-    } catch (c) {
-      console.error("Error parsing VAST", c);
-    }
-    return { success: !1 };
-  }, []), i];
-};
-export {
-  j as useLoadGAMStatic
-};

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1322198

1.34%

Number of package files

605

1%

Lines of code

23617

1.8%

Worsened metrics

Dependency count

40

5.26%

Dev dependency count

29

3.57%

No dependency changes