@streamlayer/react-ui 1.31.6 → 1.32.0

package/lib/app/app/Notifications/index.js

@@ -1,45 +1,45 @@
 import { jsxs as w, Fragment as b, jsx as u } from "react/jsx-runtime";
-import { cx as V } from "@linaria/core";
+import { cx as D } from "@linaria/core";
 import { useAppContext as O } from "../useAppContext.js";
 import { scrollIntoAppView as T } from "../../useSdkScroll.js";
-import { useState as k, useMemo as D, useEffect as h, useRef as E, useCallback as I } from "react";
-import { r as q } from "../../../index-DALxy-8N.js";
+import { useState as k, useMemo as V, useEffect as h, useRef as q, useCallback as I } from "react";
+import { createPortal as E } from "react-dom";
 import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as R } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as p } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as A } from "../../../ui/gamification/constants.js";
 import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as C } from "../../../ui/gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { HiddenContainer as P, Container as z, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
-const v = (n) => {
-  const [e, d] = k(0), i = E(null), l = D(() => new ResizeObserver((r) => {
+import { Onboarding as P } from "./Onboarding/index.js";
+import { HiddenContainer as x, Container as z, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
+const v = (r) => {
+  const [e, d] = k(0), i = q(null), l = V(() => new ResizeObserver((n) => {
     window.requestAnimationFrame(() => {
       var f;
-      if (Array.isArray(r)) {
-        for (const c of r)
+      if (Array.isArray(n)) {
+        for (const c of n)
           if (c.contentBoxSize) {
             const o = (f = i.current) == null ? void 0 : f.getBoundingClientRect();
             o && d(o.height);
           }
       }
     });
-  }), []), s = I((r) => {
-    i.current = r;
-  }, []), a = I((r) => {
-    d(r);
+  }), []), s = I((n) => {
+    i.current = n;
+  }, []), a = I((n) => {
+    d(n);
   }, []);
   return h(() => {
-    const r = i.current;
-    return r ? (l.observe(r), () => {
-      l.unobserve(r);
+    const n = i.current;
+    return n ? (l.observe(n), () => {
+      l.unobserve(n);
     }) : () => {
     };
-  }, [n]), h(() => () => {
+  }, [r]), h(() => () => {
     l.disconnect();
   }), [s, e, a];
 }, Q = ({
-  sdk: n,
+  sdk: r,
   notification: e,
   appNode: d,
   responsiveStore: i,
@@ -52,11 +52,11 @@ const v = (n) => {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: a
-  } = O(), [r, f, c] = v(e.id);
+  } = O(), [n, f, c] = v(e.id);
   let o = f;
   return l || (o = "auto"), e.type === p.QUESTION ? /* @__PURE__ */ w(b, {
-    children: [/* @__PURE__ */ u(P, {
-      ref: r,
+    children: [/* @__PURE__ */ u(x, {
+      ref: n,
       children: /* @__PURE__ */ u(N, {
         ...e
       })
@@ -83,19 +83,19 @@ const v = (n) => {
     close: e.close,
     hiding: e.hiding,
     ...e.data.question
-  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(x, {
+  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(P, {
     style: {
       height: e.hiding ? 0 : o
     },
     saveHeight: c,
-    sdk: n,
+    sdk: r,
     notification: e,
     sdkInDesktopView: s,
     appNode: d,
     responsiveStore: i
   }) : null;
 }, F = "p7vfi6t", U = ({
-  pill: n,
+  pill: r,
   setPill: e,
   appNode: d,
   headerNode: i,
@@ -105,7 +105,7 @@ const v = (n) => {
 }) => {
   var t, m;
   const {
-    screen: r
+    screen: n
   } = y(s, {
     keys: ["screen"]
   }), {
@@ -118,22 +118,22 @@ const v = (n) => {
     s.get().sdkInDesktopView ? c < 50 && e(null) : c > -50 && e(null);
   }, [c, s, e]);
   const o = s.get().sdkInDesktopView ? d : i;
-  return !n || !o.current ? null : q.createPortal(/* @__PURE__ */ u(S, {
-    title: n.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = A[(t = n.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
+  return !r || !o.current ? null : E(/* @__PURE__ */ u(S, {
+    title: r.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = A[(t = r.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
     "data-a": "intr",
     onClick: () => {
       var g;
       s.get().sdkInDesktopView ? (g = l.current) == null || g.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : T(d, r.size, {
+      }) : T(d, n.size, {
         behavior: "smooth"
       }), e(null);
     },
-    className: V(f && F, "sl-pill-button")
+    className: D(f && F, "sl-pill-button")
   }), o.current);
-}, re = ({
-  sdk: n,
+}, ne = ({
+  sdk: r,
   headerNode: e,
   scrollNode: d,
   responsiveStore: i,
@@ -141,7 +141,7 @@ const v = (n) => {
   scrollStore: s,
   hasActiveFeature: a
 }) => {
-  const [r] = k(n.getNotificationsStore()), f = y(r), [c, o] = k(null), t = D(() => n.getActiveNotification(), [n, f]);
+  const [n] = k(r.getNotificationsStore()), f = y(n), [c, o] = k(null), t = V(() => r.getActiveNotification(), [r, f]);
   return h(() => {
     t && R.emit("notification", {
       action: "rendered",
@@ -163,7 +163,7 @@ const v = (n) => {
   }, [t]), /* @__PURE__ */ w(b, {
     children: [!c && t && /* @__PURE__ */ u(Q, {
       appNode: l,
-      sdk: n,
+      sdk: r,
       hasActiveFeature: a,
       notification: t,
       responsiveStore: i
@@ -180,5 +180,5 @@ const v = (n) => {
   });
 };
 export {
-  re as SDKNotifications
+  ne as SDKNotifications
 };

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

@@ -1,32 +1,32 @@
 import { jsxs as f, Fragment as D, jsx as l } from "react/jsx-runtime";
 import { cx as T } from "@linaria/core";
 import { useMastersContext as q } from "../useMastersContext.js";
-import { scrollIntoAppView as E } from "../useSdkScroll.js";
-import { useState as p, useMemo as O, useEffect as a, useRef as b, useCallback as N } from "react";
-import { r as R } from "../../../index-DALxy-8N.js";
+import { scrollIntoAppView as O } from "../useSdkScroll.js";
+import { useState as p, useMemo as b, useEffect as g, useRef as E, useCallback as N } from "react";
+import { createPortal as R } from "react-dom";
 import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as P } from "../../../ui/gamification/constants.js";
 import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as x } from "../../../ui/gamification/question/notification/prediction-result/index.js";
 import { Onboarding as A } from "./Onboarding/index.js";
 import { HiddenContainer as B, Container as H, InnerContainer as Q, NotificationRefreshing as U, Pill as j } from "./styles.js";
-const z = (n) => {
-  const [t, c] = p(0), u = b(null), e = N((o) => {
-    u.current = o;
+const z = (o) => {
+  const [t, c] = p(0), u = E(null), e = N((n) => {
+    u.current = n;
   }, []);
-  a(() => {
+  g(() => {
     var s;
-    const o = (s = u.current) == null ? void 0 : s.getBoundingClientRect();
-    o && c(o.height);
-  }, [n]);
-  const r = N((o) => {
-    c(o);
+    const n = (s = u.current) == null ? void 0 : s.getBoundingClientRect();
+    n && c(n.height);
+  }, [o]);
+  const r = N((n) => {
+    c(n);
   }, []);
   return [e, t, r];
 }, F = ({
-  sdk: n,
+  sdk: o,
   notification: t,
   appNode: c,
   responsiveStore: u
@@ -34,8 +34,8 @@ const z = (n) => {
   var h, d;
   const {
     sdk: e
-  } = q(), [r, o, s] = z(t.id);
-  return t.type === g.QUESTION ? /* @__PURE__ */ f(D, {
+  } = q(), [r, n, s] = z(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
     children: [/* @__PURE__ */ l(B, {
       ref: r,
       children: /* @__PURE__ */ l(V, {
@@ -43,7 +43,7 @@ const z = (n) => {
       })
     }), /* @__PURE__ */ f(H, {
       style: {
-        height: t.hiding ? 0 : o
+        height: t.hiding ? 0 : n
       },
       hiding: t.hiding,
       children: [/* @__PURE__ */ l(Q, {
@@ -56,33 +56,33 @@ const z = (n) => {
         })
       }), /* @__PURE__ */ l(U, {}, t.id)]
     })]
-  }) : t.type === g.QUESTION_RESOLVED && ((d = (h = t.data) == null ? void 0 : h.question) != null && d.predictionResult) ? /* @__PURE__ */ l(x, {
+  }) : t.type === a.QUESTION_RESOLVED && ((d = (h = t.data) == null ? void 0 : h.question) != null && d.predictionResult) ? /* @__PURE__ */ l(x, {
     style: {
-      height: t.hiding ? 0 : o
+      height: t.hiding ? 0 : n
     },
     saveHeight: s,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
-  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ l(A, {
+  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ l(A, {
     style: {
-      height: t.hiding ? 0 : o
+      height: t.hiding ? 0 : n
     },
     saveHeight: s,
-    sdk: n,
+    sdk: o,
     notification: t,
     appNode: c,
     responsiveStore: u
   }) : null;
 }, L = "p1co32q0", M = ({
-  pill: n,
+  pill: o,
   setPill: t,
   appNode: c,
   headerNode: u,
   scrollNode: e,
   responsiveStore: r,
-  scrollStore: o,
+  scrollStore: n,
   useContainer: s
 }) => {
   var I, k;
@@ -93,37 +93,37 @@ const z = (n) => {
   }), {
     tabsShown: d,
     scrollPosition: m
-  } = y(o, {
+  } = y(n, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  a(() => {
+  g(() => {
     r.get().sdkInDesktopView || s ? m < 50 && t(null) : m > -50 && t(null);
   }, [m, r, t, s]);
   const i = r.get().sdkInDesktopView ? c : u;
-  return !n || !i.current ? null : R.createPortal(/* @__PURE__ */ l(j, {
-    title: n.type === g.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = P[(I = n.data) == null ? void 0 : I.questionType]) == null ? void 0 : k.label) || "notification"}`,
+  return !o || !i.current ? null : R(/* @__PURE__ */ l(j, {
+    title: o.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = P[(I = o.data) == null ? void 0 : I.questionType]) == null ? void 0 : k.label) || "notification"}`,
     onClick: () => {
       var w;
       r.get().sdkInDesktopView ? (w = e.current) == null || w.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : E(e, h.size, {
+      }) : O(e, h.size, {
         behavior: "smooth"
       }), t(null);
     },
     className: T(d && L, "sl-pill-button")
   }), i.current);
-}, ot = ({
-  sdk: n,
+}, nt = ({
+  sdk: o,
   headerNode: t,
   scrollNode: c,
   useContainer: u,
   responsiveStore: e,
   appNode: r,
-  scrollStore: o
+  scrollStore: n
 }) => {
-  const [s] = p(n.getNotificationsStore()), h = y(s), [d, m] = p(null), i = O(() => n.getActiveNotification(), [n, h]);
-  return a(() => {
+  const [s] = p(o.getNotificationsStore()), h = y(s), [d, m] = p(null), i = b(() => o.getActiveNotification(), [o, h]);
+  return g(() => {
     i && C.emit("notification", {
       action: "rendered",
       payload: {
@@ -131,17 +131,17 @@ const z = (n) => {
         questionType: i.data.questionType
       }
     });
-  }, [i]), a(() => {
+  }, [i]), g(() => {
     i && (e.get().sdkInDesktopView || e.get().sdkInView) && (!e.get().sdkInDesktopView && e.get().sdkInView && m(i), e.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      o.get().scrollPosition !== 0 && m(i);
+      n.get().scrollPosition !== 0 && m(i);
     }));
-  }, [i]), a(() => {
+  }, [i]), g(() => {
     i || m(null);
   }, [i]), /* @__PURE__ */ f(D, {
     children: [!d && i && /* @__PURE__ */ l(F, {
       headerNode: t,
       appNode: r,
-      sdk: n,
+      sdk: o,
       notification: i,
       responsiveStore: e
     }), d && /* @__PURE__ */ l(M, {
@@ -151,12 +151,12 @@ const z = (n) => {
       notification: i,
       headerNode: t,
       scrollNode: c,
-      scrollStore: o,
+      scrollStore: n,
       useContainer: u,
       responsiveStore: e
     })]
   });
 };
 export {
-  ot as SDKNotifications
+  nt as SDKNotifications
 };

package/lib/app/useClipboardCopy.js

@@ -1,15 +1,15 @@
 import { jsx as u } from "react/jsx-runtime";
-import { useRef as l, useState as s, useCallback as p, useEffect as f } from "react";
-import { r as m } from "../index-DALxy-8N.js";
+import { useRef as l, useState as s, useCallback as f, useEffect as p } from "react";
+import { createPortal as m } from "react-dom";
 import { CopyNotification as b } from "../ui/gamification/copyNotification/index.js";
 const T = (r) => {
-  const t = l(), [i, o] = s(null), a = p(
+  const t = l(), [c, o] = s(null), a = f(
     async (e) => {
-      var c;
-      if (e && ((c = navigator == null ? void 0 : navigator.clipboard) != null && c.writeText)) {
+      var i;
+      if (e && ((i = navigator == null ? void 0 : navigator.clipboard) != null && i.writeText)) {
         t.current && (clearTimeout(t.current), o(null));
         try {
-          await navigator.clipboard.writeText(e), r.current && (o(m.createPortal(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
+          await navigator.clipboard.writeText(e), r.current && (o(m(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
             o(null);
           }, 1e3));
         } catch (n) {
@@ -19,9 +19,9 @@ const T = (r) => {
     },
     [r]
   );
-  return f(() => () => {
+  return p(() => () => {
     clearTimeout(t.current);
-  }, []), [a, i];
+  }, []), [a, c];
 };
 export {
   T as useClipboardCopy

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

@@ -1,17 +1,20 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { StreamLayerSDKTvOptions } from '..';
 export interface PauseAdProps {
     vastUrls: Array<{
         template?: 'default';
         url: string;
     }>;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     caption?: string;
-    onPlay?: () => void;
     showPauseAd?: boolean;
     onRender?: (params: {
         rendered: boolean;
     }) => void;
     options?: StreamLayerSDKTvOptions;
+    isDesktop?: boolean;
 }
-export declare const PauseAd: React.FC<PauseAdProps>;
+export declare const PauseAd: React.FC<PauseAdProps & {
+    sdk: StreamLayerSDK;
+}>;

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

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

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

@@ -1,13 +1,16 @@
 import { Component } from 'react';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { PauseAdProps } from './ExposedPauseAd/PauseAd';
+import { StreamLayerSDKAdvertisementWebOS } from './Advertisement';
+import { PauseAd, PauseAdProps } from './ExposedPauseAd/PauseAd';
+import { StreamLayerSDKQuestionWebOS } from './Question';
+export { StreamLayerSDKAdvertisementWebOS, StreamLayerSDKQuestionWebOS, PauseAd, type PauseAdProps };
 export type StreamLayerSDKTvOptions = {
     showPauseButton?: boolean;
     pauseAdDelay?: number;
 };
 export type StreamLayerSDKTvProps = {
     persistent?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     sdk: StreamLayerSDK;
     showPauseAd?: boolean;
     pauseAdVastUrl?: PauseAdProps['vastUrls'];