@streamlayer/react-ui 1.32.4 → 1.33.1

package/lib/app/masters/story/index.js

@@ -1,23 +1,24 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as l, Fragment as c } from "react";
-import { MastersStreamLayerProvider as s, useStreamLayer as a } from "@streamlayer/react/masters";
-import { MastersApp as p } from "../masters.js";
+import { u as l } from "../../../hooks-B0Qttldg.js";
+import { useState as s, Fragment as a } from "react";
+import { MastersApp as c } from "../masters.js";
+import { MastersStreamLayerProvider as p } from "../provider.js";
 import { StreamLayerMastersThemeProvider as m } from "../../../ui/theme/masters.js";
 import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { MobileHeader as u, Body as y, Container as k, AppContainer as T, HostAppContent as f, BackToTop as v, BackToTopLink as C } from "./components.js";
+import { MobileHeader as u, Body as y, Container as k, AppContainer as f, HostAppContent as T, BackToTop as v, BackToTopLink as C } from "./components.js";
 const L = ({ betPack: o }) => {
-  const r = a();
-  return r ? /* @__PURE__ */ e(m, { style: { height: "100%" }, children: /* @__PURE__ */ e(p, { sdk: r, betPack: o, useContainer: !0 }) }) : null;
+  const r = l();
+  return r ? /* @__PURE__ */ e(m, { style: { height: "100%" }, children: /* @__PURE__ */ e(c, { sdk: r, betPack: o, useContainer: !0 }) }) : null;
 }, S = () => {
   console.log("deep link handled cb");
 }, g = () => {
   console.log("video player handled cb");
-}, H = ({ betPack: o }) => {
-  const r = h(), [n, t] = l(0), i = () => {
-    t(n + 1);
+}, K = ({ betPack: o }) => {
+  const r = h(), [t, n] = s(0), i = () => {
+    n(t + 1);
   };
-  return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ d(
-    s,
+  return /* @__PURE__ */ e(a, { children: /* @__PURE__ */ d(
+    p,
     {
       sdkKey: r.sdkKey,
       production: r.env === "production",
@@ -26,14 +27,14 @@ const L = ({ betPack: o }) => {
       event: r.event,
       children: [
         /* @__PURE__ */ e(u, { onClick: () => i(), children: "header" }),
-        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(T, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(L, { betPack: o }) }) }) }) }),
-        /* @__PURE__ */ e(f, { style: { height: 3e3 }, children: "...host app content..." }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(f, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(L, { betPack: o }) }) }) }) }),
+        /* @__PURE__ */ e(T, { style: { height: 3e3 }, children: "...host app content..." }),
         /* @__PURE__ */ e(v, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
         /* @__PURE__ */ e(C, { href: "#", children: "BackToTop Link" })
       ]
     }
-  ) }, n);
+  ) }, t);
 };
 export {
-  H as MastersStory
+  K as MastersStory
 };

package/lib/app/masters/useMastersApp.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../packages/sdk-web-interfaces/src/index.ts';
 import { AvailableOverlays } from './Navigation/MastersNavigation';
 /**
  * A hook that provides functionality for managing the StreamLayerSDK in the Masters app.

package/lib/app/masters/useMastersContext.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../packages/sdk-web-interfaces/src/index.ts';
 export declare const MastersContext: import('react').Context<{
     sdk: StreamLayerSDK | null;
 }>;

package/lib/app/tgl/index.d.ts

@@ -8,4 +8,5 @@ export declare const TGLStory: React.FC<{
     persistent?: boolean;
     sidebar: 'left' | 'right';
     banner: 'top' | 'bottom';
+    layoutMode?: 'cover' | 'side-by-side';
 }>;

package/lib/app/tgl/index.js

@@ -1,49 +1,48 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { styled as o } from "@linaria/react";
-import { StreamLayerProvider as l } from "@streamlayer/react";
+import { d as l } from "../../hooks-B0Qttldg.js";
 import { useStreamLayerDebug as u } from "../../utils/debug/index.js";
-import { Video as v } from "./video.js";
-const f = /* @__PURE__ */ o("div")({
+import { Video as f } from "./video.js";
+const b = /* @__PURE__ */ o("div")({
   name: "Body",
   class: "b1ssmzei",
   propsAsIs: !1
-}), b = /* @__PURE__ */ o("div")({
+}), v = /* @__PURE__ */ o("div")({
   name: "Main",
   class: "me6bye3",
   propsAsIs: !1
 }), k = ({
   isMobileScreen: s,
   persistent: t,
-  insightId: n,
-  promotionId: i,
-  sdkKey: d,
+  insightId: i,
+  promotionId: d,
+  sdkKey: n,
   eventId: m,
   sidebar: a,
   production: p,
   banner: c,
   layoutMode: y = "side-by-side"
 }) => {
-  const e = u({
-    sdkKey: d,
+  const r = u({
+    sdkKey: n,
     eventId: m,
     production: p
   });
-  return /* @__PURE__ */ r(b, {
-    children: /* @__PURE__ */ r(l, {
-      sdkKey: e.sdkKey,
-      event: e.event,
-      production: e.env === "production",
+  return /* @__PURE__ */ e(v, {
+    children: /* @__PURE__ */ e(l, {
+      sdkKey: r.sdkKey,
+      event: r.event,
+      production: r.env === "production",
       autoEnable: !0,
-      children: /* @__PURE__ */ r(f, {
-        children: /* @__PURE__ */ r(v, {
-          event: e.event,
+      children: /* @__PURE__ */ e(b, {
+        children: /* @__PURE__ */ e(f, {
           banner: c,
           sidebar: a,
           layoutMode: y,
-          promotionId: i,
+          promotionId: d,
           isMobileScreen: s,
           persistent: t,
-          insightId: n
+          insightId: i
         })
       })
     })

package/lib/app/tgl/video.d.ts

@@ -4,7 +4,6 @@ export declare const Video: React.FC<{
     layoutMode: 'cover' | 'side-by-side';
     isMobileScreen?: boolean;
     persistent?: boolean;
-    event?: string;
     promotionId?: string;
     insightId?: string;
 }>;

package/lib/app/tgl/video.js

@@ -1,58 +1,58 @@
-import { jsxs as o, Fragment as P, jsx as r } from "react/jsx-runtime";
-import { useRef as V, useState as T, useCallback as w, useEffect as x } from "react";
-import { useStreamLayer as A } from "@streamlayer/react";
+import { jsxs as t, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { u as w } from "../../hooks-B0Qttldg.js";
+import { useRef as x, useState as A, useCallback as S, useEffect as F } from "react";
 import { StreamLayerSDKAdvertisement as s } from "../app/Advertisement/index.js";
-import { StreamLayerSDKInsight as g } from "../app/Insight/index.js";
-import { StreamLayerThemeProvider as h } from "../../ui/theme/index.js";
-import { PromoButton as S, VideoFrame as F, AdvSidebar as L, customTheme as u, VideoPlayerWrap as k, AdvBanner as R, AdvContent as b } from "./styles.js";
-const O = ({ isMobileScreen: m, sidebar: l, banner: p, event: n, persistent: t, insightId: f, promotionId: c, layoutMode: a }) => {
-  const e = A(), v = V(null), [y, C] = T(!0), d = w(({ muted: i }) => {
-    C(i);
+import { StreamLayerSDKInsight as C } from "../app/Insight/index.js";
+import { StreamLayerThemeProvider as d } from "../../ui/theme/index.js";
+import { PromoButton as L, VideoFrame as k, AdvSidebar as R, customTheme as h, VideoPlayerWrap as b, AdvBanner as j, AdvContent as B } from "./styles.js";
+const z = ({ isMobileScreen: l, sidebar: n, banner: u, persistent: o, insightId: p, promotionId: m, layoutMode: a }) => {
+  const e = w(), f = x(null), [P, V] = A(!0), c = S(({ muted: i }) => {
+    V(i ?? !1);
   }, []);
-  return x(() => (e == null || e.addVideoPlayerController(d), () => {
-    e == null || e.removeVideoPlayerController(d);
-  }), [e, d]), /* @__PURE__ */ o(P, { children: [
-    c && /* @__PURE__ */ o(S, { onClick: () => {
+  return F(() => (e == null || e.addVideoPlayerController(c), () => {
+    e == null || e.removeVideoPlayerController(c);
+  }), [e, c]), /* @__PURE__ */ t(T, { children: [
+    m && /* @__PURE__ */ t(L, { onClick: () => {
       var i;
-      (i = v.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
-        e == null || e.getFeature(12).background.advertisement.show(c);
+      (i = f.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        var v, g, y;
+        m && ((y = (g = (v = e == null ? void 0 : e.getFeature(12)) == null ? void 0 : v.background) == null ? void 0 : g.advertisement) == null || y.show(m));
       }, 200);
     }, children: [
       "open promotion: ",
-      c
+      m
     ] }),
-    /* @__PURE__ */ o(F, { ref: v, "data-testid": "video-frame", children: [
+    /* @__PURE__ */ t(k, { ref: f, "data-testid": "video-frame", children: [
       /* @__PURE__ */ r(
-        L,
+        R,
         {
           style: {
             ...a === "cover" ? { position: "absolute" } : {},
-            ...l === "left" ? { left: 0 } : { right: 0, order: 3 },
-            ...m ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
+            ...n === "left" ? { left: 0 } : { right: 0, order: 3 },
+            ...l ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
           },
-          children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+          children: e && /* @__PURE__ */ t(d, { customTheme: h, children: [
             /* @__PURE__ */ r(
               s,
               {
-                isMobileScreen: m,
-                event: n,
+                isMobileScreen: l,
                 sdk: e,
-                sidebar: l,
+                sidebar: n,
                 layoutMode: a,
-                persistent: t,
+                persistent: o,
                 skipTypeCheck: !0
               }
             ),
-            /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+            /* @__PURE__ */ r(C, { insightId: p, sdk: e, persistent: o })
           ] })
         }
       ),
-      /* @__PURE__ */ o(k, { children: [
+      /* @__PURE__ */ t(b, { children: [
         /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
           "video",
           {
             src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-            muted: y,
+            muted: P,
             width: "100%",
             height: "100%",
             autoplay: "autoplay",
@@ -62,44 +62,42 @@ const O = ({ isMobileScreen: m, sidebar: l, banner: p, event: n, persistent: t,
           }
         ) }),
         /* @__PURE__ */ r(
-          R,
+          j,
           {
             style: {
               ...a === "cover" ? { position: "absolute" } : {},
-              ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+              ...u === "top" ? { top: 0, order: -1 } : { bottom: 0 }
             },
-            children: e && /* @__PURE__ */ r(h, { customTheme: u, children: /* @__PURE__ */ r(
+            children: e && /* @__PURE__ */ r(d, { customTheme: h, children: /* @__PURE__ */ r(
               s,
               {
-                isMobileScreen: m,
-                event: n,
+                isMobileScreen: l,
                 sdk: e,
-                banner: p,
+                banner: u,
                 layoutMode: a,
-                persistent: t
+                persistent: o
               }
             ) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(b, { children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+    /* @__PURE__ */ r(B, { children: e && /* @__PURE__ */ t(d, { customTheme: h, children: [
       /* @__PURE__ */ r(
         s,
         {
-          isMobileScreen: m,
-          event: n,
+          isMobileScreen: l,
           sdk: e,
-          sidebar: l,
+          sidebar: n,
           layoutMode: a,
-          persistent: t,
+          persistent: o,
           skipTypeCheck: !0
         }
       ),
-      /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+      /* @__PURE__ */ r(C, { insightId: p, sdk: e, persistent: o })
     ] }) })
   ] });
 };
 export {
-  O as Video
+  z as Video
 };

package/lib/app/useSdkFeature.d.ts

@@ -1,6 +1,6 @@
-import { Features } from '@streamlayer/sdk-web-features';
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { FeatureType } from '@streamlayer/sdk-web-types';
+import { Features } from '../packages/sdk-web-features/src/index.ts';
+import { StreamLayerSDK } from '../packages/sdk-web-interfaces/src/index.ts';
+import { FeatureType } from '../packages/sdk-web-types/src/index.ts';
 /**
  * A hook that manages the active feature of a StreamLayerSDK instance.
  * @param sdk - The StreamLayerSDK instance to manage the feature for.

package/lib/app/webos/Advertisement/AdvertisementUI.d.ts

@@ -1,4 +1,4 @@
-import { Advertisement } from '@streamlayer/feature-gamification';
+import { Advertisement } from '../../../packages/feature-gamification/src/index.ts';
 import { ControlVideoCb } from '../../../ui/video-player';
 export declare const AdvertisementUI: React.FC<{
     advertisement: Exclude<Advertisement['data'], undefined>;

package/lib/app/webos/Advertisement/index.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export type StreamLayerSDKAdvertisementProps = {
     persistent?: boolean;
     sidebar?: 'left' | 'right';

package/lib/app/webos/ExposedPauseAd/PauseAd.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 import { StreamLayerSDKTvOptions } from '..';
 export interface PauseAdProps {
     vastUrls: Array<{

package/lib/app/webos/ExposedPauseAd/PauseAd.js

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

package/lib/app/webos/Question/index.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export type StreamLayerSDKQuestionProps = {
     persistent?: boolean;
     skipAutoClose?: boolean;

package/lib/app/webos/index.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../packages/sdk-web-interfaces/src/index.ts';
 import { StreamLayerSDKAdvertisementWebOS } from './Advertisement';
 import { PauseAd, PauseAdProps } from './ExposedPauseAd/PauseAd';
 import { StreamLayerSDKQuestionWebOS } from './Question';